获取选定复选框的值和文本

Question

我正在尝试在单击按钮时获取一组选定的复选框值和文本

<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>

我正在获取复选框的值，但如何在数组中获取文本

var checkboxes = document.getElementsByName('checkbox[]');
var vals = 0;
for (var i=0, n=checkboxes.length;i<n;i++) {
    if (checkboxes[i].checked) {
        vals += ","+checkboxes[i].value;
    }
}

谢谢！

Answer 1

您可以使用map() 创建一个包含您需要的值的数组：

var labelValues = $(':checkbox:checked').map(function() {
    return [ $(this).next('label').text(), this.value ];
}).get();

但是，鉴于您想要的输出，创建一个带有标签作为属性的对象会更有意义，如下所示：

var obj = {};
$(':checkbox:checked').each(function() {
    obj[$(this).next('label').text()] = this.value;
});

---

-- 2021 年更新--

您现在可以使用 ES6 箭头函数简化 map() 调用。此外，您可以将复选框值和标签文本组合到对象数组中，如下所示：

$(':checkbox').on('change', () => {
  let labelValues = $(':checkbox:checked').map((i, el) => ({
    value: el.value,
    text: el.nextElementSibling.textContent
  })).get();

  console.log(labelValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>

Answer 2

@Rory 的答案很适合将值和文本返回到单个数组中。但由于 OP 要求将值和文本返回到单独的数组中，我建议采用以下方法来做到这一点。

您所要做的就是使用 2 个数组从文本中获取单独的值。

Working JSFiddle here.

运行下面的 sn-p 以在控制台中查看输出。
此示例将返回：

1. 数组中的选中复选框值
2. 数组中选中的复选框文本
3. 数组中选中的复选框（以防万一）

var selectedCheckBoxValue = [];
var selectedCheckBoxText = [];

var selectedCheckBox = $(':checkbox:checked').map(function(i) {

  selectedCheckBoxValue[i] = this.value;
  selectedCheckBoxText[i] = $(this).next('label').text();
  return this;
}).get();


//Selected Checkboxes Value in a seperate Array
console.log(selectedCheckBoxValue);

//Selected Checkboxes Text in a seperate Array
console.log(selectedCheckBoxText);

//Selected Checkboxes element in a seperate Array
console.log(selectedCheckBox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" name="checkbox[]" value="1" checked="true" />
<label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" checked="true" />
<label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" />
<label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" checked="true" />
<label>text4</label>