复选框 select/deselect 触发器第一次工作但在后续尝试中失败
Checkbox select/deselect trigger works first time but fails on subsequent attempts
我有一大块 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);
}
}
})
$(selector).prop('checked', true/false);
也通过.prop() vs .attr()
您应该在设置复选框属性选中时使用延迟执行。
Please refer this blog
我有一大块 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);
}
}
})
$(selector).prop('checked', true/false);
也通过.prop() vs .attr()
您应该在设置复选框属性选中时使用延迟执行。 Please refer this blog