選中/取消選中所有復選框僅選中一個復選框，但返回所有其他復選框值

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; } 

 <table> <tr onclick="addValue(this);"> <input type="checkbox" id="checkUncheckAll" onClick="CheckUncheckAll()" />Check all<br/></th> <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" /> 

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

Answer 2

 // Checkbox all simple function CheckUncheckAll(){ var checkboxes = document.getElementsByName('user_id[]'); var values = ""; // check all if (checkUncheckAll.checked == true) { // Loop and Check all for (var i = 0; i < checkboxes.length; i++){ checkboxes[i].checked = true; } for (var i = 0; i < checkboxes.length; i++) { values += checkboxes[i] .value + "," } //remove last comma values = values.slice(0, values.length - 1); } else { // Loop and Uncheck for (var i = 0; i < checkboxes.length; i++){ checkboxes[i].checked = false; } } document.getElementById("studID").value = values; } // add value input 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; } 

 <!-- You can try function and add code value to input user_id[] example --> <table> <tr onclick="addValue(this);"> <input type="checkbox" id="checkUncheckAll" onClick="CheckUncheckAll()" />Check all<br/></th> <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" /> 

Answer 3

<script>
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;

}
</script>
<table>
  <tr onclick="addValue(this);">
    <td><input type="checkbox" name="user_id[]" value='User id' /></td>
  </tr>
</table>
<input type="text" id="studID"/>