javascript - 获取选中复选框的值和文本

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>