切换复选框设置答案

【问题标题】：Toggle Checkbox settings切换复选框设置
【发布时间】：2015-07-22 10:38:19
【问题描述】：

我有一个元素表，每个元素都有一行，有一个复选框可以选择加入或退出。由于项目列表可能很长，我想提供一个“全局”复选框来勾选所有复选框或根据此全局复选框的设置取消勾选它们。我创建的 jQuery 代码正是这样做的，但不幸的是只有一次。我无法一次又一次地切换设置。有什么想法为什么？谢谢！

这是我的代码：

jQuery('#ci-firmware-assign-toggle-checkbox').click(function(){
    if(jQuery('#ci-firmware-assign-toggle-checkbox').is(":checked")) {
        jQuery('tbody .ci-firmware-assign-checkbox').each(function(){
            if(!jQuery(this).attr("checked")) {
                jQuery(this).attr('checked', true);
            };
        });
    } else {
        jQuery('tbody .ci-firmware-assign-checkbox').each(function(){
            if(jQuery(this).attr("checked")) {
                jQuery(this).attr('checked', false);
            };
        });
    }
});

【问题讨论】：

如果.attr()，你应该使用.prop()，我认为你的代码可以简化为jQuery('#ci-firmware-assign-toggle-checkbox').click(function(){ jQuery('tbody .ci-firmware-assign-checkbox').prop('checked', this.checked); });

标签： javascript jquery checkbox toggle

【解决方案1】：

jQuery('#ci-firmware-assign-toggle-checkbox').change(function(){   
   $('.ci-firmware-assign-checkbox').prop("checked", $(this).is(":checked"))
});

【讨论】：

【解决方案2】：

我是这样做的

jQuery('#ci-firmware-assign-toggle-checkbox').click(function(){   
if(jQuery('#ci-firmware-assign-toggle-checkbox').is(":checked")) {
    
   $( '.ci-firmware-assign-checkbox' ).prop( "checked", function() {
        return true;
    })
    
} else {
   $( '.ci-firmware-assign-checkbox' ).prop( "checked", function() {
        return false;
    })
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='ci-firmware-assign-toggle-checkbox' type='checkbox' />Toggle All<br/>
<input id='1' type='checkbox' class='ci-firmware-assign-checkbox' />Checkbox 1<br/>
<input id='2' type='checkbox' class='ci-firmware-assign-checkbox' />Checkbox 2

它似乎工作正常

【讨论】：

【解决方案3】：

jQuery('#ci-firmware-assign-toggle-checkbox').click(function(){
    if(jQuery('#ci-firmware-assign-toggle-checkbox').is(":checked")) {
        jQuery('tbody .ci-firmware-assign-checkbox').each(function(){
            if(!jQuery(this).**prop**("checked")) {
                jQuery(this).**prop**('checked', 'checked');
            };
        });
    } else {
        jQuery('tbody .ci-firmware-assign-checkbox').each(function(){
            if(jQuery(this).**prop**("checked")) {
                jQuery(this).**removeProp**('checked');
            };
        });
    }
});

属性 -> HTML - 仅在 html 中进行更改

properties -> DOM - 更改 dom javascript 状态对象

【讨论】：