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

我有一个小问题，我真的没有如何解决它，如果我选中了所有复选框，它将出现“取消所有选择”，但如果我取消选择一个或两个我想要我的“选择所有”再次出现，我的问题是，如果我选择每个复选框，我开始手动取消选中一个一个它假设要再次激活选择全部，但如果我按全选它将取消选中所有内容而不是全部选中。检查所有/取消选中所有复选框js

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

来源

2013-02-19 paoloi

$('#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-19 20:56:32 gregjer

我喜欢你有更好的方式。 – 2013-02-19 21:02:51

是的，这是事实，你很有组织性。 – paoloi 2013-02-19 21:18:31

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

来源

2013-02-19 20:33:27 searlea

由于您使用一个隐藏的输入标记作为一个标志，我会用在你的点击功能藏汉

$('#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个复选框何时被选中，它会将其更改为“取消全部选中”并将您的标志更改为“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/

来源

2013-02-19 20:48:46

你是混合和匹配属性和属性这里所有复选框。使用'.prop（'checked'，true）'和'.prop（'checked'，false）'。 – 2013-02-19 21:02:41

有几件事情要考虑：

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/

来源

2013-02-19 20:50:34

HTML

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

$(':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-19 21:09:44

试试这个，

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

来源

2013-06-24 10:06:17 Kautil

检查所有复选框

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

以取消选中所有复选框

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

检查使用

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

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

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

来源

2013-09-20 07:10:29

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

回答

相关问题