Question

我有一点问题，我真的不怎么解决它，如果我选中了所有复选框，它将显示“取消全选”，但是如果我取消选择一个或两个我希望我的“全部选择”再次出现，我的问题是，如果我选择每个复选框并且我开始手动取消选中它一个接一个地假设激活再次全部选择，但如果我按全选，它将取消选中所有内容而不是全部检查。

这是我的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);
    }
});

Answer 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/

Answer 2

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

Answer 3

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

$('#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个复选框，它会将其更改为“Uncheck All”并将你的标志更改为“true”。

$('.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/

Answer 4

需要考虑的一些事项：

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

2）除了使用隐藏输入来跟踪是否需要设置或清除复选框之外，您还可以使用2个按钮来切换可见性（或显示确实）。这样，您就不必根据复选框状态设置按钮了。

3）切换不是状态更改处理程序。它只是切换元素的可见性。相反，结合评论＃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/

Answer 5

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
    }
}

Answer 6

试试这个，

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

Answer 7

选中所有复选框

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

取消选中所有复选框

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

使用类

检查所有复选框

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

使用类

取消选中所有复选框

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

选中全部/取消选中所有复选框js

7 个答案: