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

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 value

function 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) {&nbsp; var values = [];&nbsp; checkboxes.forEach(function(box) {&nbsp; &nbsp; if (box.checked) values.push(box.value)&nbsp; })&nbsp; document.getElementById("studID").value = values.join(",");}window.addEventListener("load", function() {&nbsp; var checkboxes = document.getElementsByName("user_id[]");&nbsp; document.getElementById("checkUncheckAll").addEventListener("click", function() {&nbsp; &nbsp; var checked = this.checked;&nbsp; &nbsp; checkboxes.forEach(function(box) {&nbsp; &nbsp; &nbsp; box.checked = checked;&nbsp; &nbsp; })&nbsp; &nbsp; sumIt(checkboxes)&nbsp; })&nbsp; checkboxes.forEach(function(box) {&nbsp; &nbsp; box.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; sumIt(checkboxes)&nbsp; &nbsp; })&nbsp; })})<table>&nbsp; <tr>&nbsp; &nbsp; <th colspan="3"><input type="checkbox" id="checkUncheckAll" />Check all</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td><input type="checkbox" name="user_id[]" value='1' /></td>&nbsp; &nbsp; <td><input type="checkbox" name="user_id[]" value='2' /></td>&nbsp; &nbsp; <td><input type="checkbox" name="user_id[]" value='3' /></td>&nbsp; </tr></table><input class="form-control" name="user_id" id="studID" type="text" maxlength="255" />