我怎样才能纠正这个jquery / js复选框代码

How can i correct this jquery / js checkbox code

本文关键字：jquery js 代码 复选框      更新时间：2023-09-26

我一直很难弄清楚这个代码。

复选框代码的功能如下：

有一个全局复选框（全选）和子（单个）复选框。如果选中（全局）复选框，则所有（子）复选框也将选中，将显示一个div，如果未选中全局，它将取消选中（子）复选框，div 将隐藏（jquery 隐藏并显示）。将显示选中的复选框的编号。

这就是问题所在;如果取消选中子复选框，则全局复选框仍保持选中状态，如果选中所有子复选框，则全局复选框也应立即选中。

 <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">
    $(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);
}

感谢所有支持。提前谢谢。

将 #global 更改为 .global

这应该有效。只需要一个事件。

$(document).ready(function() {
  var child = $('.child');
  var global = $('.global');
  $('input').on("change", function() {
    //check if checkbox is the global one
    if($(this).hasClass("global")) {
      //if yes, then set all childs to checked true, if not, then to false
      ($(this).prop('checked')) ? child.prop('checked', true) : child.prop('checked', false);
    } else {
      var oneChecked = false;
      //every change on a checkbox go though all childboxes an check if on of them is checked
      child.each(function() {
        if($(this).prop('checked') == true) {
          oneChecked = true;
        }
      });
      //if one was checked global has to be checked, if no one was checked it has to be false
      (oneChecked) ? global.prop('checked', true) : global.prop('checked', false);
    } 
  });
});


$(document).ready(function() {
  var div = $('#mydiv'),
      global = $('#global'),
      childchecks = $(':checkbox.child');
  global.on('change', function() {
    childchecks.prop('checked', this.checked);
    var how = this.checked ? 'show' : 'hide';
    div[how]();
  });
  childchecks.on('change', function() {
    global.prop('checked', childchecks.length === childchecks.filter(':checked').length );
    var how = childchecks.length === childchecks.filter(':checked').length ? 'show' : 'hide';
    div[how]();
  });
});
<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">

尝试：

$(document).ready( function(){
    $('#global').change( function(){
        var bIsChecked = $(this).is(':checked');
        $('.child').prop('checked', bIsChecked );
        $('#mydiv')[ bIsChecked ? 'show' : 'hide' ]();
        count();
    });
    $('.child').change( function(){
        var n = count();
        $('#mydiv')[ n>0 ? 'show' : 'hide' ]();
        $('#global')[0].checked = n==$('.child').length ;
    });
});
var count =function(){
   var n = $('.child:checked').length;
   $('#counter').html( n );
   return n
}
相关文章：