Question

我有一组具有相同名称的输入复选框我想确定使用javascript检查了哪些复选框，我该如何实现？我只知道如何获取所有复选框如下：

var checkboxes = document.getElementsByName('mycheckboxes');

Answer 1

一个简单的for循环，用于测试checked属性并将已检查的属性附加到单独的数组中。从那里，您可以根据需要进一步处理checkboxesChecked数组。

// Pass the checkbox name to the function
function getCheckedBoxes(chkboxName) {
  var checkboxes = document.getElementsByName(chkboxName);
  var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<checkboxes.length; i++) {
     // And stick the checked ones onto an array...
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i]);
     }
  }
  // Return the array if it is non-empty, or null
  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

// Call as
var checkedBoxes = getCheckedBoxes("mycheckboxes");

Answer 2

在IE9 +，Chrome或Firefox中，您可以这样做：

var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');

Answer 3

获取数组中所有选中的复选框值-一个衬里

const data = [...document.querySelectorAll('.inp:checked')].map(e => e.value);
console.log(data);

<div class="row">
    <input class="custom-control-input inp"type="checkbox" id="inlineCheckbox1" Checked value="option1"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option1</label>
    <input class="custom-control-input inp"  type="checkbox" id="inlineCheckbox1" value="option2"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option2</label>
    <input class="custom-control-input inp" Checked  type="checkbox" id="inlineCheckbox1" value="option3"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option3</label>
</div>

Answer 4

对于简单的两（或一个）班轮，此代码可以是：

checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);

此处Array.prototype.slice.call()部分将具有该名称（“ NameOfCheckboxes”）的所有复选框的对象NodeList转换为新数组，然后在其上使用filter方法。然后，例如，您还可以通过在第2行的末尾添加.map(ch => ch.value)来提取复选框的值。 =>是javascript的箭头功能符号。

Answer 5

您可以为表单中的所有复选框指定一个类，并像这样获取它们的选中属性：

document.querySelectorAll('.mycheckbox').forEach(function(elem) {
        console.log(elem.checked);
});

<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="1" checked="checked">Johnson</label>
</div>

<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="2">
Henry</label>
</div>

<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="3" checked="checked">
Donald</label>
</div>

如何获取所有选中的复选框

5 个答案: