复选框 select/deselect 触发器第一次工作但在后续尝试中失败

Question

我有一大块 jQuery 是基于 html data-* 标签工作的，可以通过一组复选框来搜索表单。

单击 'All' 复选框，其余所有复选框都应取消选中（这每次都可以正常工作）。

现在，如果选择了 'All' 并且您单击了不同的选项，那么 'All' 应该会取消选择，这也会按预期工作。

但是，如果您愿意，可以取消选择 'All' 复选框，该复选框将默认选中其余的复选框，这样您就可以取消选择您想要的结果。

如果您到目前为止没有更改任何其他内容，这是第一次使用，但如果选择了任何其他复选框栏 'All' 或者您已经单击了一次 'All' 按钮如果您选择它会失败，然后再次取消选择它。

任何关于它的想法都将不胜感激（我尝试使用控制台来发现它没有做什么，但到目前为止它没有提供任何线索）。

示例如下。

html...
<input data-sel-group='group1' id='group1_all'/>
<input data-sel-group='group1' id='group1_1'/>
<input data-sel-group='group1' id='group1_2'/>
/html...

jQuery...
$('input:checkbox').on('click',function(){
var sel = $(this).data('sel-group'),
    all = $('#'+sel+'_all'),
    chk = all.is(':checked');
    if($(this).attr('id')==all.attr('id')){
        if(chk){
            $('input[data-sel-group="'+sel+'"][id!="'+sel+'_all"]').attr('checked', false);
        }else{
            $('input[id!="'+sel+'_all"][data-sel-group="'+sel+'"]').attr('checked', true);
        }
    }else{
        all.attr('checked', false);
        if($('input[data-sel-group="'+sel+'"]:checked').length<=0){
            all.attr('checked', true);
        }
    }
})

Answer 1

使用.prop() instead of .attr()

$(selector).prop('checked', true/false);

也通过.prop() vs .attr()

Answer 2

您应该在设置复选框属性选中时使用延迟执行。 Please refer this blog

复选框 select/deselect 触发器第一次工作但在后续尝试中失败

Checkbox select/deselect trigger works first time but fails on subsequent attempts

javascript

jquery

checkbox

html5-data