选中/取消选中所有复选框仅选中一个复选框，但返回所有其他复选框值

Question

我有这个javascript，它会选中所有复选框和取消选中所有复选框。如果我单击此复选框，它将发送一个值到input = text。这个复选框/取消复选框的问题是，当我单击它时，它将返回所有值（这正是我想要的，但是问题是，它只会勾选1个复选框，但返回所有值。）我希望它勾选所有返回所有值的复选框。下面是代码。function addValue(row) {  //select all checkboxes with name userid that are checked  var checkboxes = document.querySelectorAll("input[name='user_id[]']:checked")  var values = "";  //append values of each checkbox into a variable (seperated by commas)  for (var i = 0; i < checkboxes.length; i++) {    values += checkboxes[i]      .value + ","  }  //remove last comma  values = values.slice(0, values.length - 1)  //set the value of input box  document.getElementById("studID").value = values;}//Above is the code to return value to the input=text.//Below is the code for check/uncheck all checkbox valuefunction CheckUncheckAll() {  var selectAllCheckbox = document.getElementById("checkUncheckAll");  if (selectAllCheckbox.checked == true) {    var checkboxes = document.getElementsByName("user_id[]");    for (var i = 0, n = checkboxes.length; i < n; i++) {      checkboxes[i].checked = true;      var values = "";      //append values of each checkbox into a variable (seperated by commas)      for (var i = 0; i < checkboxes.length; i++) {        values += checkboxes[i]          .value + ","      }      //remove last comma      values = values.slice(0, values.length - 1)      //set the value of input box    }  } else {    var checkboxes = document.getElementsByName("user_id[]");    for (var i = 0, n = checkboxes.length; i < n; i++) {      checkboxes[i].checked = false;      var values = "";      for (var i = 0; i < checkboxes.length; i++) {        values += ""      }    }  }  document.getElementById("studID").value = values;}

Answer 1

这是检查所有物品并收集物品的方法

function sumIt(checkboxes) {

  var values = [];

  checkboxes.forEach(function(box) {

    if (box.checked) values.push(box.value)

  })

  document.getElementById("studID").value = values.join(",");

}

window.addEventListener("load", function() {

  var checkboxes = document.getElementsByName("user_id[]");

  document.getElementById("checkUncheckAll").addEventListener("click", function() {

    var checked = this.checked;

    checkboxes.forEach(function(box) {

      box.checked = checked;

    })

    sumIt(checkboxes)

  })

  checkboxes.forEach(function(box) {

    box.addEventListener("click", function() {

      sumIt(checkboxes)

    })

  })

})

<table>

  <tr>

    <th colspan="3"><input type="checkbox" id="checkUncheckAll" />Check all</th>

  </tr>

  <tr>

    <td><input type="checkbox" name="user_id[]" value='1' /></td>

    <td><input type="checkbox" name="user_id[]" value='2' /></td>

    <td><input type="checkbox" name="user_id[]" value='3' /></td>

  </tr>

</table>

<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" />