Question

HTML

<input id='checkall' type='checkbox'/> 
<input class='checka' type='checkbox'/>
<input class='checka' type='checkbox'/>
<input class='checka' type='checkbox'/>
<input class='checka' type='checkbox'/>

的Javascript

$('#checkall').change(function(){
    if ($(this).is(':checked')){
        $('.checka').attr('checked', true);
    }
    else{
        $('.checka').attr('checked', false);
    }
});

加载页面后，这很好用。

但是，如果在checka点击之前选中/取消选中某些checkall，则该广告仅适用于non-clicked checka。

Answer 1

您应该使用.prop代替.attr

根据Roko的建议，您可以使用$('.checka').prop('checked', this.checked);代替if / else

如果选中this.checked，

#checkall将返回true。否则，它返回false。

因此，当您说$('.checka').prop('checked', this.checked);时，如果选中.checka，则为#checkall分配所有复选框，如果选中$(function() { $('#checkall').change(function() { $('.checka').prop('checked', this.checked); }); });，则为true;如果不是，则为false。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='checkall' type='checkbox'> Check All
<br />
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>

＆＃13;

$( '.checka' ).change(function(){
    if ( $('.checka:checked').length != $('.checka').length ) $('#checkall').prop('checked', false);
    else $('#checkall').prop('checked', true);
});

＆＃13;

<强>建议：

您可能还想添加

$(function() {
  $('#checkall').change(function() {
    $('.checka').prop('checked', this.checked);
  });

  $('.checka').change(function() {
    if ($('.checka:checked').length != $('.checka').length) $('#checkall').prop('checked', false);
    else $('#checkall').prop('checked', true);
  });
});

如果选中了所有其他复选框，则会检查全部检查。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='checkall' type='checkbox'> Check All
<br />
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>
<input class='checka' type='checkbox'>

＆＃13;

site: dist
index_document: index.html
error_document: error.html
s3_endpoint: us-east-2
cloudfront_wildcard_invalidation: true

＆＃13;

单击一些复选框后，选中取消选中全部

1 个答案: