检查所有/取消选中所有复选框js答案

【问题标题】：check all/ uncheck all checkboxes js检查所有/取消选中所有复选框js
【发布时间】：2020-08-03 04:13:40
【问题描述】：

我有一个小问题，我真的不知道如何解决它，如果我选择了所有复选框，它将显示“取消全选”，但如果我取消选择一两个我希望我的“全选”再次出现，我的问题是，如果我选择每个复选框并且我开始手动取消选中它假设再次激活全选，但如果我按下全选，它将取消选中所有内容而不是全选。

这是我的 HTML 代码的一部分：

<input type="button" class="btn-primary btn-mini" id="check1" value="Check All" /> 
<input type="hidden" id="isChkd" value="true" />                                                                      
<input type="checkbox" name="" value="" class="cb1-element"> 751        
<input type="checkbox" name="" value="" class="cb1-element"> 752                                                                  
<input type="checkbox" name="" value="" class="cb1-element"> 753                                                                  
<input type="checkbox" name="" value="" class="cb1-element"> 754

我的 JS：

$('#check1').toggle(function(){
    $('.cb1-element').attr('checked','checked');
    $(this).val('Uncheck All');
    $('#isChkd').val(true);
},function(){
    $('.cb1-element').removeAttr('checked');
    $(this).val('Check All');     
    $('#isChkd').val(false);
})

$('.cb1-element').change(function(){
    if($('#isChkd').val() == false){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val(false);
    }
});

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

$('#check1').click(function(){
    if($('#isChkd').val() == 'true'){
        $('.cb1-element').attr('checked','checked');
        $(this).val('Uncheck All');
        $('#isChkd').val('false');
    }
    else{
        $('.cb1-element').removeAttr('checked');
        $(this).val('Check All');     
        $('#isChkd').val('true');
    }
});

$('.cb1-element').change(function(){
    var all = $('input.cb1-element').length;
    var checked = $('input.cb1-element:checked').length;
    if(all == checked){
        $('#check1').val('Uncheck All');
        $('#isChkd').val('false');
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val('true');
    }
});

在这里工作 jsFiddle http://jsfiddle.net/C9Tw2/18/

【讨论】：

我更喜欢你的方式。

【解决方案2】：

我认为$('#isChkd').val() 正在返回一个字符串，因此与== false 的比较总是失败。

【讨论】：

【解决方案3】：

需要考虑的几点：

1) 要设置/清除checked 属性，请使用.prop('checked', true) 或.prop('checked', false)。这是在 jQuery 中处理属性的更新更好的方法。

2) 您可以使用 2 个按钮来切换可见性（或真正显示），而不是使用隐藏输入来跟踪您的复选框是否需要设置或清除。这样，您不必根据复选框状态对按钮进行特殊处理。

3) Toggle 不是状态更改处理程序。它只是切换元素的可见性。相反，结合评论 #2，使用.on('click', function() {})，或仅使用.click()。

4) 你真的有 3 种状态：全开、全关、其他组合。您需要决定如何处理第三个状态。在这种情况下，您甚至可以同时显示“全选”和“取消全选”。

HTML：

<input type="button" class="btn-primary btn-mini" id="check1" value="Check All"/>
<input type="button" class="btn-primary btn-mini" id="uncheck1" value="Uncheck All"/>
<input type="checkbox" name="" value="" class="cb1-element">751
...

JS：

$('#check1').on('click', function () {
    $('.cb1-element').prop('checked', true);
    $('#check1, #uncheck1').toggle();
});

$('#uncheck1').on('click', function () {
    $('.cb1-element').prop('checked', false);
    $('#check1, #uncheck1').toggle();
});

$('.cb1-element').change(function () {
    var num = $('.cb1-element').length;

    if ($('.cb1-element:checked').length == num) {
        $('#check1').hide();
        $('#uncheck1').show();
    } else {
        $('#uncheck1').hide();
        $('#check1').show();
    }
});

演示： http://jsfiddle.net/jtbowden/tfwX9/

【讨论】：

【解决方案4】：

由于您使用隐藏的输入标签作为标志，我也会在您的点击功能中使用它

$('#check1').click(function(){
    if($('#isChkd').val() == "false"){
        $('.cb1-element').prop('checked', true);
        $(this).val('Uncheck All');
        $('#isChkd').val(true);
    } else if($('#isChkd').val() == "true"){
        $('.cb1-element').prop('checked', false);
        $(this).val('Check All');     
        $('#isChkd').val(false);
    }
});

这样你就没有必须点击才能工作的切换功能。

我还在您的更改函数中添加了另一个 if 语句，以检测所有 4 个复选框何时被选中，它会将其更改为“取消选中所有”并将您的标志更改为“真”。

$('.cb1-element').change(function(){
    if($('#isChkd').val() == false){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);
    }else if($(':checked').length == 4){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);    
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val(false);
    }
});

您可以在 jsfiddle 中看到它在这里工作： http://jsfiddle.net/TWMAu/

【讨论】：

您在这里混合和匹配属性和属性。使用.prop('checked', true) 和.prop('checked', false)。

【解决方案5】：

试试这个，

<input type="checkbox" id="check1" onclick="$('input[type=checkbox][class=cb1-element]').attr('checked',this.checked)">

【讨论】：

【解决方案6】：

选中所有复选框

$("input:checkbox").attr("checked", true);

取消选中所有复选框

$("input:checkbox").attr("checked", false);

使用类检查所有复选框

$(".class_name:checkbox").attr("checked", true);

使用类取消选中所有复选框

$(".class_name:checkbox").attr("checked", false);

【讨论】：

【解决方案7】：

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<button>Check All</button>

JS

$(':checkbox').click(function () {
    ex()
});
$('button').click(function () {
    ex(1)
});
var ex = function (btn) {
    if ($(':checkbox').length == $(':checkbox:checked').length) { //All are checked
        if (btn == 1) { //If button is clicked
            $(':checkbox').attr('checked', false);//Uncheck All
            $('button').html('Check All');
        } else { //If button is not clicked i.e. the last unselected checkbox was clicked
            $('button').html('Uncheck All');
        }
    } else if (btn == 1) { // BUtton is clicked
        $(':checkbox').attr('checked', true);//Check All
        $('button').html('Uncheck All');
    } else {
        $('button').html('Check All'); // Reset text to default
    }
}

【讨论】：