Question

我在HTML页面中有20个check boxes（动态编号），默认情况下为checked。用户可以uncheck或保留checked。最后，有一个用于submit的按钮。

如何获取仅在提交时检查的项目？

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

Answer 2

通过css Class获取所有复选框，并反复检查条件element.checked

检查此代码段

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>

如何制作一组在复选框中选中的项目

2 个答案: