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')

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

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

然后仅侦听所有复选框的onChange事件并为隐藏字段设置值。

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

2 个答案: