Question

我正在开发一个jquery函数，它充当select all选项。一切都很好，除非当我取消选择select all的任何我的孩子元素时，该选项仍然启用。我只想根据孩子的情况禁用或启用select all选项。这是ma代码。

标记

<div class='sett_field notif_all'>
   <ul>
      <li class="" id="show_ntf_all">
         <label>select all</label>
      </li>
   </ul>
</div>

<div class='sett_field sep_fld'>
   <ul>
      <li class="show_ntf">
         <label>Show Notification</label>
      </li>
   </ul>
</div>
<div class='sett_field sep_fld'>
   <ul>
      <li class="show_ntf">
         <label>Show Notification</label>
      </li>
   </ul>
</div>
<div class='sett_field sep_fld'>
   <ul>
      <li class="show_ntf">
         <label>Show Notification</label>
      </li>
   </ul>
</div>
<div class='sett_field sep_fld'>
   <ul>
      <li class="show_ntf">
         <label>Show Notification</label>
      </li>
   </ul>
</div>

Jquery的

$('#show_ntf_all').click(function () {
        if(!$(this).hasClass('check')){
            $('.show_ntf').addClass('check');
            $(this).addClass('check');
        }
        else{
            $('.show_ntf').removeClass('check');
            $(this).removeClass('check');
        }
    });

    $('.sep_fld').on('click', '.show_ntf', function () {
        if($(this).hasClass('check')){
            var check_length = $('.show_ntf').filter(".check").length;
            var show_length = $('.show_ntf').length;
            console.log(check_length);
            console.log(show_length);
            var check = check_length==show_length;
            $(this).removeClass('check')
            if (check==true){
                $('#show_ntf_all').addClass('check');                
            }
            else{
                $('#show_ntf_all').removeClass('check');
            }
        }
        else{
            $(this).addClass('check')
        }
    });

Working Fiddle

提前致谢。

Answer 1

试试这个（同样，您可以使用toggleClass缩短代码）：

$('.sep_fld').on('click', '.show_ntf', function () {
        $(this).toggleClass('check');
        var check_length = $('.show_ntf').filter(".check").length;
        var show_length = $('.show_ntf').length;
        var check = check_length==show_length;
        if (check==true){
            $('#show_ntf_all').addClass('check');                
        }
        else{
            $('#show_ntf_all').removeClass('check');
        }
});

<强> Fiddle

Answer 2

检查可选项目和所选项目的数量。如果两者相等，请添加上面的类：

$('.sep_fld').on('click', '.show_ntf', function () {
    if($(this).hasClass('check')){
        var check_length = $('.show_ntf').filter(".check").length;
        var show_length = $('.show_ntf').length;
        console.log(check_length);
        console.log(show_length);
        $(this).removeClass('check')
        if (check_length==show_length)
            $('#show_ntf_all').addClass('check');                
        else
            $('#show_ntf_all').removeClass('check');
    }
    else{
        $(this).addClass('check')
    }
});

小提琴：http://jsfiddle.net/z85mbtg8/1/

Answer 3

我只需将$(this).removeClass('check');移动到点击功能的顶部即可实现此目的。

$('.sep_fld').on('click', '.show_ntf', function () {
    if($(this).hasClass('check')){
        $(this).removeClass('check');
        var check_length = $('.show_ntf.check').length;
        var show_length = $('.show_ntf').length;
        console.log(check_length);
        console.log(show_length);
        var check = check_length==show_length;

        if (check==true){
            $('#show_ntf_all').addClass('check');                
        }
        else{
            $('#show_ntf_all').removeClass('check');
        }
    }
    else{
        $(this).addClass('check')
    }
});

Answer 4

只需更改此部分就可以了：

if (check==true){
    $('#show_ntf_all').removeClass('check');                
}
else{
    $('#show_ntf_all').addClass('check');
}

如何使用jquery创建一个select all函数

4 个答案:

小提琴：http://jsfiddle.net/z85mbtg8/1/