获取数组中所有选中的checkbox

所以我有这些checkbox：

<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请求。

有什么想法吗？

编辑：我只想要选中的checkbox被添加到数组

Answer 1

格式化：

 $("input:checkbox[name=type]:checked").each(function(){ yourArray.push($(this).val()); }); 

希望它能起作用。

Answer 2

 var chk_arr = document.getElementsByName("chkRights[]"); var chklength = chk_arr.length; for(k=0;k< chklength;k++) { chk_arr[k].checked = false; } 

Answer 3

我没有testing它，但它应该工作

 <script type="text/javascript"> var selected = new Array(); $(document).ready(function() { $("input:checkbox[name=type]:checked").each(function() { selected.push($(this).val()); }); }); </script> 

Answer 4

这应该做的伎俩：

 $('input:checked'); 

我不认为你有其他的元素可以检查，但如果你这样做，你必须使它更具体：

 $('input:checkbox:checked'); $('input:checkbox').filter(':checked'); 

Answer 5

在MooTools 1.3（最新在撰写本文时）：

 var array = []; $$("input[type=checkbox]:checked").each(function(i){ array.push( i.value ); }); 

Answer 6

在Javascript中，它会是这样的（演示链接） ：

 // 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; } 

Answer 7

如果你想使用一个香草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> 

Answer 8

纯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) } 

Answer 9

 var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () { return this.value; }).get(); 

Answer 10

使用jquery

你只需要添加类到每个input，我有添加类“源”，你可以改变它当然

 <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> 

Answer 11

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> 

Answer 12

用这个：

 var arr = $('input:checkbox:checked').map(function () { return this.value; }).get(); 

Answer 13

如果使用button单击或某物来运行插入，请使用注释如果阻止阻止添加已经在数组中的值

 $('#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> 

Answer 14

 $('#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>