0

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

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

7 回答 7

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/

于 2013-02-19T20:56:32.630 回答
0

我认为$('#isChkd').val()是返回一个字符串，所以比较== false总是失败。

于 2013-02-19T20:33:27.520 回答
0

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

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

于 2013-02-19T20:48:46.563 回答
0

有几点需要考虑：

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

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

3) Toggle 不是状态更改处理程序。它只是切换元素的可见性。相反，结合注释 #2、use.on('click', function() {})或 just .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/

于 2013-02-19T20:50:34.253 回答
0

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
    }
}
于 2013-02-19T21:09:44.390 回答
0

试试这个，

<input type="checkbox" id="check1" onclick="$('input[type=checkbox][class=cb1-element]').attr('checked',this.checked)">
于 2013-06-24T10:06:17.830 回答
0

选中所有复选框

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

取消选中所有复选框

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

使用类检查所有复选框

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

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

$(".class_name:checkbox").attr("checked", false);
于 2013-09-20T07:10:29.673 回答