获取数组中所有选中的复选框
Posted
技术标签:
【中文标题】获取数组中所有选中的复选框【英文标题】：Getting all selected checkboxes in an array 【发布时间】：2010-10-10 01:18:20 【问题描述】：所以我有这些复选框：
<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />
等等。其中大约有 6 个，并且是手动编码的（即不是从数据库中获取的），因此它们可能会在一段时间内保持不变。
我的问题是如何将它们全部放在一个数组中（在 javascript 中），这样我就可以在使用 Jquery 发出 AJAX $.post 请求时使用它们。
有什么想法吗？
编辑：我只想将选中的复选框添加到数组中
【问题讨论】：
jquery multiple checkboxes array的可能重复 虽然other question 较新且这个更受欢迎，但另一个有更好、更简洁的答案集合（包括这里的策略，还有一些）。 这个问题没有尝试过的代码，但仍然吸引了赞成票和答案，投票结束 【参考方案1】：格式化：
$("input:checkbox[name=type]:checked").each(function()
yourArray.push($(this).val());
);
希望它会起作用。
【讨论】：
如果取消选中复选框，如何从数组中删除值 @JubinPatel 您只需要在此代码之前重置数组。yourArray = []
你也可以立即使用map而不是each来定义你的数组：var yourArray = $("input:checkbox[name=type]:checked").map(function()return $(this).val()).get()
function get_selected_checkboxes_array() var ch_list=Array(); $("input:checkbox[type=checkbox]:checked").each(function()ch_list.push($(this).val());); return ch_list; 【参考方案2】：
纯 JS
对于那些不想使用 jQuery 的人
var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
for (var i = 0; i < checkboxes.length; i++)
array.push(checkboxes[i].value)
【讨论】：
总是喜欢香草的 JS 答案。 是的，有些时候我们真的不想使用 jQuery 也是您的解决方案，带有适用于 vanilla JS 的地图功能。Array.from(document.querySelectorAll("input[name='type']:checked")).map((elem) => elem.value)【参考方案3】：
var chk_arr = document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;
for(k=0;k< chklength;k++)
chk_arr[k].checked = false;
【讨论】：
据我了解上面的代码，它遍历所有复选框并取消选中它们。这个答案与问题有何联系？ 这只是遍历复选框并取消选中它们。正确答案在VanillaJS中，请看下面zahid ullah的答案。 这如何回答这个问题？这做了一些与所要求的完全无关的事情。为什么会有这么多赞？我错过了什么，还是在人们投票后对问题进行了编辑？【参考方案4】：我没有测试它，但它应该可以工作
<script type="text/javascript">
var selected = new Array();
$(document).ready(function()
$("input:checkbox[name=type]:checked").each(function()
selected.push($(this).val());
);
);
</script>
【讨论】：
推动在数组中添加值但取消选中要删除什么？【参考方案5】：ES6 版本：
const values = Array
.from(document.querySelectorAll('input[type="checkbox"]'))
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
function getCheckedValues()
return Array.from(document.querySelectorAll('input[type="checkbox"]'))
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
const resultEl = document.getElementById('result');
document.getElementById('showResult').addEventListener('click', () =>
resultEl.innerhtml = getCheckedValues();
);<input type="checkbox" name="type" value="1" />1
<input type="checkbox" name="type" value="2" />2
<input type="checkbox" name="type" value="3" />3
<input type="checkbox" name="type" value="4" />4
<input type="checkbox" name="type" value="5" />5
<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>【讨论】：
【参考方案6】：这应该可以解决问题：
$('input:checked');
我认为您没有其他可以检查的元素，但如果您这样做，您必须使其更具体：
$('input:checkbox:checked');
$('input:checkbox').filter(':checked');
【讨论】：
【参考方案7】：纯 JavaScript，无需临时变量：
Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked"), e => e.value);
【讨论】：
使用 vanilla JS 的最简洁的解决方案 其实应该是...map((i,e) => e.value))...
@spetsnaz 索引是第二个元素，所以如果你需要索引，你需要做 (e,i)。在这种情况下，这当然不是必需的。见developer.mozilla.org/nl/docs/Web/JavaScript/Reference/…
不错的单行解决方案。可以很容易地在以输入名称作为参数和返回语句来获取数组的方法中重用。【参考方案8】：
在 MooTools 1.3 中（撰写本文时最新）：
var array = [];
$$("input[type=checkbox]:checked").each(function(i)
array.push( i.value );
);
【讨论】：
没有意识到问题的年代或解决方案的性质是相关的。 因为我在使用 MooTools 寻找相同问题的答案时发现了这个问题。 请注意，此答案与 MooTools 1.3 相关，而不是 jQuery。【参考方案9】：如果你想使用 vanilla JS，你可以像 @zahid-ullah 那样做，但要避免循环：
var values = [].filter.call(document.getElementsByName('fruits[]'), function(c)
return c.checked;
).map(function(c)
return c.value;
);
相同的代码在 ES6 中看起来更好：
var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);
window.serialize = function serialize()
var values = [].filter.call(document.getElementsByName('fruits[]'), function(c)
return c.checked;
).map(function(c)
return c.value;
);
document.getElementById('serialized').innerText = JSON.stringify(values);
label
display: block;
<label>
<input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
<input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
<input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
<input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
<input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>【讨论】：
【参考方案10】：在 Javascript 中会是这样的 (Demo Link):
// get selected checkboxes
function getSelectedChbox(frm)
var selchbox = [];// array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++)
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
return selchbox;
【讨论】：
【参考方案11】：var checkedValues = $('input:checkbox.vdrSelected:checked').map(function ()
return this.value;
).get();
【讨论】：
【参考方案12】：选中时添加复选框的值，取消选中时减去值
$('#myDiv').change(function()
var values = 0.00;
$('#myDiv :checked').each(function()
//if(values.indexOf($(this).val()) === -1)
values=values+parseFloat(($(this).val()));
//
);
console.log( parseFloat(values));
);<div id="myDiv">
<input type="checkbox" name="type" value="4.00" />
<input type="checkbox" name="type" value="3.75" />
<input type="checkbox" name="type" value="1.25" />
<input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>【讨论】：
请在您的答案中添加一些解释。纯代码答案通常没有用。【参考方案13】：在现代浏览器中使用 vanilla JS 执行此操作的另一种方法（不支持 IE，遗憾的是在撰写本文时不支持 ios Safari）是 FormData.getAll()：
var formdata = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question
// allchecked is ["1","3","4","5"] -- if indeed all are checked
【讨论】：
【参考方案14】：使用这个：
var arr = $('input:checkbox:checked').map(function ()
return this.value;
).get();
【讨论】：
【参考方案15】：按输入名称选择复选框
var category_id = [];
$.each($("input[name='yourClass[]']:checked"), function()
category_id.push($(this).val());
);
【讨论】：
【参考方案16】：使用 Jquery
你只需要为每个输入添加类，我已经添加类“源”你当然可以改变它
<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />
<script type="text/javascript">
$(document).ready(function()
var selected_value = []; // initialize empty array
$(".source:checked").each(function()
selected_value.push($(this).val());
);
console.log(selected_value); //Press F12 to see all selected values
);
</script>
【讨论】：
【参考方案17】：function selectedValues(ele)
var arr = [];
for(var i = 0; i < ele.length; i++)
if(ele[i].type == 'checkbox' && ele[i].checked)
arr.push(ele[i].value);
return arr;
【讨论】：
为了得到一个有用的答案，这个反应需要扩展。解释为什么这是问题的答案。 欢迎来到 Stack Overflow 并感谢您的贡献！如果您能阅读本指南How to write a good answer 并相应地调整您的答案，那就太好了。谢谢！【参考方案18】：var array = []
$("input:checkbox[name=type]:checked").each(function()
array.push($(this).val());
);
【讨论】：
【参考方案19】：如果您使用按钮单击或其他方式运行插入，请使用注释的 if 块来防止添加已经在数组中的值
$('#myDiv').change(function()
var values = [];
$('#myDiv :checked').each(function()
//if(values.indexOf($(this).val()) === -1)
values.push($(this).val());
//
);
console.log(values);
);<div id="myDiv">
<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>【讨论】：
【参考方案20】：你可以试试这样的：
$('input[type="checkbox"]').change(function()
var checkedValue = $('input:checkbox:checked').map(function()
return this.value;
).get();
alert(checkedValue); //display selected checkbox value
)
这里
$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function() looping on all checkbox,
【讨论】：
【参考方案21】：这是我解决同样问题的代码，有人也可以试试这个。 jquery
<script>
$(document).ready(function()`
$(".check11").change(function()
var favorite1 = [];
$.each($("input[name='check1']:checked"), function()
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
);
);
);
</script>
【讨论】：
【参考方案22】：可以使用我创建的这个函数
function getCheckBoxArrayValue(nameInput)
let valores = [];
let checked = document.querySelectorAll('input[name="'+nameInput+'"]:checked');
checked.forEach(input =>
let valor = input?.defaultValue || input?.value;
valores.push(valor);
);
return(valores);
要使用它，就这样称呼它
getCheckBoxArrayValue("type");
【讨论】：
【参考方案23】： var idsComenzi = [];
$('input:checked').each(function()
idsComenzi.push($(this).val());
);
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?以上是关于获取数组中所有选中的复选框的主要内容，如果未能解决你的问题，请参考以下文章
使用 .serializeArray 从所有选中的复选框中获取值