Jquery: How to hold checkbox check / uncheck state in hidden field

Question

i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.

user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.

when user uncheck anyone then that checkbox value will be removed from hidden field.

I tried this way but not successful. so guide me how to achieve it. my code as follows

<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
 </tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">

$(document).ready(function(){
  $('#chckHead').click(function () {
    $(".chcktbl").prop('checked', $(this).prop("checked"));
  });  

  $(".chcktbl").change(function() {
  var values = [];
  $('.chcktbl').each(function (index, obj) {
  alert('pop');
    if (this.checked === true) {
      values.push($(this).val());
    }
  });
  });
  alert(values.toString());

});

Answer 1

You forget to assign the checkboxes values to the hidden input and also, you have to do so in the header checkbox event listener.

 $(document).ready(function() { var hidden = $('#hidden'); $('#chckHead').click(function() { var state = $(this).prop('checked'); if(state === false) { hidden.val(''); } var vals = []; $('.chcktbl').each(function() { $(this).prop('checked', state); if(this.checked === true) { vals.push($(this).val()); } }); hidden.val(vals.toString()); }); $(".chcktbl").change(function() { var values = []; $('.chcktbl').each(function(index, obj) { if(this.checked === true) { values.push($(this).val()); } }); hidden.val(values.toString()); }); }); 

 <table id="tbl" border="10"> <thead> <tr> <td><input type="checkbox" id="chckHead" /></td> <td>First Row</td> <td>Second Row</td> <td>Third Row</td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="chcktbl" value="101" /> </td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td> <input type="checkbox" class="chcktbl" value="102" /> </td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td> <input type="checkbox" class="chcktbl" value="103" /> </td> <td>3</td> <td>3</td> <td>3</td> </tr> </tbody> </table> <!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.--> <input id="hidden" type="text" name="hidden"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Hope I pushed you further.

Answer 2

You should be able to get all checked checkboxes with this selector:

$('input[type=checkbox]:checked')

Then you can call map to get all the ids and join them

string = $('input[type=checkbox]:checked').map(function(idx,element) {
    return element.value;
}).join(',')

Then just listen the onChange event for all checkboxes and set the value for the hidden field.