当我选中一个复选框（相同的类）并将值插入文本框中时，如何检查另一个复选框

Question

i have a checkbox with same class, basically what it does is that if i checked the checkbox it will checked the same class as the checkbox and it will return value. But it will not return directly, i need to click somewhere then it register to the textbox. What i need is straight-forward value into the textbox when i checked the checkbox. The table code is from php so the class+number will change and its not fix.

Below is the snippet for it.

 function doSomethingElse(row) { //select all checkboxes with name userid that are checked var checkboxes = document.querySelectorAll("input[name='student_name[]']: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("stud_name").value = values; } $("input:checkbox").change(function() { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr onclick="doSomethingElse(this);"> <td><input type="checkbox" class="something1" name="user_id[]" value='' /></td> <td><input type="checkbox" class="something1" name="student_name[]" value='1' /></td> <td><input type="checkbox" class="something2" name="student_name[]" value='' /></td> <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" /> 

Answer 1

Try using $("input:checkbox").click(function () { instead of change

 function doSomethingElse(row){ //select all checkboxes with name userid that are checked var checkboxes = document.querySelectorAll("input[name='student_name[]']: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("stud_name").value = values; } $("input:checkbox").click(function () { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr onclick="doSomethingElse(this);"> <td><input type="checkbox" class ="something1"name="user_id[]" value='ID1' /></td> <td><input type="checkbox" class ="something1"name="student_name[]" value='NAME1' /></td> <td><input type="checkbox" class ="something2"name="student_name[]" value='NAME2' /></td> <td><input type="checkbox" class ="something2"name="user_id[]" value='ID2' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" /> 

Answer 2

It's hard to figure out exactly what you want from your question, but I've given it a try.

Firstly, is there an error in your HTML? Should the below:

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

actually be:

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

Notice the values swapped around.

I think to solve your problem you can do all the work in the onchange like below:

 $("input:checkbox").change(function () { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); var checkboxes = $("input[name='student_name[]']: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 $("#stud_name").val(values); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox" class ="something1"name="user_id[]" value='' /></td> <td><input type="checkbox" class ="something1"name="student_name[]" value='1' /></td> <td><input type="checkbox" class ="something2"name="student_name[]" value='2' /></td> <td><input type="checkbox" class ="something2"name="user_id[]" value='' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" /> 

I've also tried to improve your formatting a bit and stuck to using only jquery selectors

Answer 3

I've got you a working fiddle over her; https://jsfiddle.net/nd01p86t/15/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td><input type="checkbox" class="something1" name="user_id[]" value='' /></td>
    <td><input type="checkbox" class="something1" name="student_name[]" value='1' /> </td>
    <td><input type="checkbox" class="something2" name="student_name[]" value='' /> </td>
    <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>
  </tr>
</table>

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

THE functions...

function doSomethingElse(row) {
  //select all checkboxes with name userid that are checked
  var checkboxes = document.querySelectorAll("input[name$='[]']:checked")
  // OR...
  //var checkboxes = document.querySelectorAll("input[type='checkbox']:checked")

  //append values of each checkbox into a variable (seperated by commas)

  var values = Array.from(checkboxes).filter( checkbox => checkbox.value ).map( checkbox => checkbox.value ).join(',');

  //set the value of input box
  document.getElementById("stud_name").value = values;
}

//  Attach to the table and delegate 'click' per row
$("table").delegate("tr", "click", doSomethingElse);


$("input:checkbox").click(function() {
  //alert('Ok!');
  var value = $(this).attr("class");
  $(":checkbox[class='" + value + "']").prop("checked", this.checked);
})