Javascript 如何获得所有选中的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8563240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all checked checkboxes
提问by Sameh Farahat
I have a set of input checkboxes with the same name and I would like to determine which checkboxes have been checked using javascript, how can I achieve that? I know only how to get all the checkboxes as follows:
我有一组同名的输入复选框，我想确定使用 javascript 检查了哪些复选框，我该如何实现？我只知道如何获取所有复选框，如下所示：
var checkboxes = document.getElementsByName('mycheckboxes');
回答by PhilT
In IE9+, Chrome or Firefox you can do:
在 IE9+、Chrome 或 Firefox 中，您可以执行以下操作：
var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
回答by Michael Berkowski
A simple for loop which tests the checkedproperty and appends the checked ones to a separate array. From there, you can process the array of checkboxesCheckedfurther if needed.
一个简单的 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");
回答by Daniel
For a simple two- (or one) liner this code can be:
对于简单的两（或一个）内衬，此代码可以是：
checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);
Here the Array.prototype.slice.call()part converts the object NodeList of all the checkboxes holding that name ("NameOfCheckboxes") into a new array, on which you then use the filter method. You can then also, for example, extract the values of the checkboxes by adding a .map(ch => ch.value)on the end of line 2.
The => is javascript's arrow function notation.
此处，该Array.prototype.slice.call()部分将所有持有该名称（“NameOfCheckboxes”）的复选框的对象 NodeList 转换为一个新数组，然后在该数组上使用 filter 方法。例如，您还可以通过.map(ch => ch.value)在第 2 行的末尾添加 a来提取复选框的值。=> 是 javascript 的箭头函数表示法。
回答by anonymous
Get all the checked checkbox value in an array - one liner
获取数组中所有选中的复选框值 - 一个班轮
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>