我有一组同名的输入复选框，我想确定使用 javascript 选中了哪些复选框，我该如何实现？我只知道如何获取所有复选框，如下所示：
var checkboxes = document.getElementsByName('mycheckboxes');
如何获得所有选中的复选框
IT技术
javascript
html
2021-01-28 08:11:45
5个回答
在 IE9+、Chrome 或 Firefox 中，您可以执行以下操作：
var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
一个简单的 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");
对于简单的两（或一个）内衬，此代码可以是：
checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);
此处，该Array.prototype.slice.call()部分将所有持有该名称（“NameOfCheckboxes”）的复选框的对象 NodeList 转换为一个新数组，然后在该数组上使用 filter 方法。例如，您还可以通过.map(ch => ch.value)在第 2 行的末尾添加 a来提取复选框的值。=> 是 javascript 的箭头函数表示法。
获取数组中所有选中的复选框值 - 一个班轮
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>您可以为表单中的所有复选框指定一个类，并像这样获取它们的选中属性：
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>