如何制作在复选框中选中的项目数组[重复]答案

【问题标题】：How to make an array of items which are checked in checkbox [duplicate]如何制作在复选框中选中的项目数组[重复]
【发布时间】：2018-07-17 12:04:33
【问题描述】：

我在一个默认为checked的HTML页面中有一些check boxes（动态数字）。用户可以uncheck 或留下checked。最后有一个submit的按钮。

如何获取提交时只勾选的项目？

【问题讨论】：

你能发布你的代码吗？
var arr = $('YourCheckBoxSelector').filter(":checked").map(function () { return this.value; }).get();
github.com/marioizquierdo/jquery.serializeJSON - 这可能会帮助您解决所有输入类型。

标签： javascript jquery html checkbox

【解决方案1】：

对于普通的 javascript 解决方案，您可以使用document.querySelectorAll()。

检索复选框，然后遍历它们，然后将 push() 所有具有 checked: true 属性的复选框添加到名为 checked 的数组中。

var checkboxes = document.querySelectorAll("input[type=checkbox]");
var submit = document.getElementById("submit");

function getChecked() {
  var checked = [];

  for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    if (checkbox.checked) checked.push(checkbox.value);
  }

  return checked;
}

submit.addEventListener("click", function() {
  var checked = getChecked();
  console.log(checked);
});

<input type="checkbox" value="first" checked>
<input type="checkbox" value="second" checked>
<input type="checkbox" value="third" checked>

<input type="submit" id="submit">

【讨论】：

在所有必要的检查和取消检查之后如何处理？
更新为包含提交按钮！
那么如何只获取值属性，而不是标签
更新为仅.push() 将checkbox.value 放入checked 数组中
虽然答案完全正确，但如果我们以更好的方式使用 javascript 会更简洁。 1. 获取选中的输入字段列表：let checkboxes = [].slice.call(document.querySelectorAll("input[type=checkbox]:checked")) 2. 获取值数组：let values = checkboxes.map(item => item.value) 我鼓励你们玩这些东西。

【解决方案2】：

通过css Class获取所有复选框并迭代以检查其上的条件element.checked

检查此代码sn-p

function checkCheckBoxes(){
$("input.abc").each(function(index, element){
  if(!element.checked){
   console.log(index+" not checked");
  } else{
  console.log(index+" checked");
  }
});
return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
  <input type="submit"  onclick="return checkCheckBoxes()" value="Submit">
</form>

【讨论】：