Question

请问如何添加和显示此行代码中已选中复选框的数量。

这是复选框的工作方式：它有一个父和子复选框;当我检查父复选框（Checkall）时，它会检查所有（子复选框）并显示一个div，当我每个子复选框（Single）时，它也显示div，当我取消选中（Parent / Child）时div隐藏（jquery隐藏和显示）。

所以，我的问题是我想在代码中添加复选框计数器。当我检查父母（全部检查）以及当我检查每个孩子（单身）时，如何显示数字计数，我的div仍将显示（隐藏和显示）。

请帮忙。非常感谢提前。您可以改进代码（翻新）或重写。这是下面的代码

＆＃13;

$(document).ready(function() {
  $('#global').click(function() {
    $('.child').prop('checked', $(this).is(':checked'));

    if ($(this).is(':checked'))
      $('#mydiv').show();
    else
      $('#mydiv').hide();
  });

  $('.child').change(function() {
    var checkedLength = $('.child:checked').length;
    if (checkedLength > 0)
      $('#mydiv').show();
    else
      $('#mydiv').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv" style="display:none;">RESTORE | DELETE</div>

<input type="checkbox" id="global">
<br>
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">

＆＃13;

我会很高兴:)。

Answer 1

显示已检查的子复选框的数量：

＆＃13;

$(document).ready(function() {
  $('#global').click(function() {
    $('.child').prop('checked', $(this).is(':checked'));

    if ($(this).is(':checked'))
      $('#mydiv').show();
    else
      $('#mydiv').hide();

    count();
  });

  $('.child').change(function() {
    var checkedLength = $('.child:checked').length;
    if (checkedLength > 0)
      $('#mydiv').show();
    else
      $('#mydiv').hide();
    count();
  });
});

var count = function() {
   var i = $('input.child:checked').length;
   $('#counter').html(i);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv" style="display:none;">RESTORE | DELETE
<span>Checked: </span>
<span id="counter"></span>
</div>

<input type="checkbox" id="global">
<br>
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">

＆＃13;

如何将已选中复选框的数量添加到此jquery / js代码中

1 个答案: