javascript - 如果我在表单中有多个复选框，如何传递当前选中的所有复选框？

Question

这是我的代码：

<form action="test.php" method="post">
    <input type="checkbox" value="value 1" onClick="updateCards(this.value);">
    <input type="checkbox" value="value 2" onClick="updateCards(this.value);">
    <input type="checkbox" value="value 3" onClick="updateCards(this.value);">
    <input type="checkbox" value="value 4" onClick="updateCards(this.value);">
    <input type="checkbox" value="value 5" onClick="updateCards(this.value);">
</form>

如何获取当前选中的所有复选框？

Answer 1

尝试

<form id="myform" action="test.php" method="post">

然后

function getChcked(){
    var form = document.getElementById('myform');
    var chks = form.querySelectorAll('input[type="checkbox"]');
    var checked = [];
    for(var i = 0; i < chks.length; i++){
        if(chks[i].checked){
            checked.push(chks[i].value)
        }
    }
    return checked;
}

演示：小提琴

Answer 2

有两种快速的方法可以给你的表单元素一个 ID。获取对它的引用并遍历它的所有子元素（这是您所有的复选框）并检查所检查属性的值是什么。

您还可以为所有复选框指定一个类名并使用document.getElementsByClassName，然后遍历结果以检查选中的属性。但是我认为 IE8 可能不支持第二种方法，请不要引用我的话，但我会使用第一种方法。

像这样的东西

<form action="test.php" method="post" id="myForm">
  <input type="checkbox" value="value 1" onClick="updateCards(this.value);">
  <input type="checkbox" value="value 2" onClick="updateCards(this.value);">
  <input type="checkbox" value="value 3" onClick="updateCards(this.value);">
  <input type="checkbox" value="value 4" onClick="updateCards(this.value);">
  <input type="checkbox" value="value 5" onClick="updateCards(this.value);">
</form>

var getValues = function() {
  var nodes = document.getElementById("myForm").children;
  var checkedValues = [],
      length = nodes.length,
      i = 0;

  for(i;i<length;i++){
    if(nodes[i].checked)
    checkedValues.push(nodes[i].value);
  }

  return checkedValues;
};

Answer 3

如果您只使用 jQuery，这会简单得多：

  function GetChecked()
  {
     return $("input:checked");
  }

Answer 4

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");

现场演示

也试试这个

$("#clickme").click(function(e){


    var selected = $("#checkboxes input:checked").map(function(i,el){return el.name;}).get();


    alert("selected = [" + selected + "]\nas string = \"" + selected.join(";") + "\"");


});

Answer 5

这是一个简单的方法来做同样的事情：

var nodeArray = document.querySelectorAll('form input:checked'), 
    i = nodeArray.length, selected = [];
while(i--) selected.push(nodeArray[i].value);