Check/Uncheck all checkbox only check 1 box but return all of the other checkbox value

Question

I have this javascript which does check all checkbox and uncheckall checkbox. If i click on this checkbox it will send a value to input=text. The problem with this checkbox/uncheckcheckbox is that when i click on it, it will return all value(which is exactly i wanted, but the problem is that it will only tick 1 checkbox but return all value.) I want it to tick all the checkbox with returning all the value.

Below is the code.

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

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

Here is how to check all and collect

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