jQuery：如何在隐藏字段中保持复选框选中/取消选中状态

Question

我有一个HTML表，其中有很多复选框。 当用户单击标题复选框时，将根据标题复选框的选中状态选中和取消选中所有子复选框。

用户也可以取消选中并选中任何子复选框。 我想将子复选框的值存储在以逗号分隔的隐藏字段中。 当选中子复选框时，复选框值将存储在hiiden字段中，但是如果该复选框值在hiiden字段中，则不会存储在隐藏字段中。

当用户取消选中任何人时，该复选框的值将从隐藏字段中删除。

我尝试过这种方法，但没有成功。 所以指导我如何实现它。 我的代码如下

<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

您忘记将复选框的值分配给隐藏的input而且还必须在标头复选框事件监听器中执行此操作。

 $(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> 

希望我能进一步推动您。

Answer 2

您应该能够使用此选择器获得所有选中的复选框：

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

然后，您可以调用地图以获取所有ID并将其加入

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

然后，只需侦听所有复选框的onChange事件并设置隐藏字段的值即可。