jquery取消选中复选框

时间:2014-08-14 11:24:15

标签: jquery html

这是一段复制的代码,我做了一些更改。问题是我只是想知道如何在取消选中所有复选框之前取消选中复选框。     以下是代码:

#html#

<html>
<table id="tab1"><tr><td>   
<input type="checkbox" name="book" id="book" value="book1" class="check">book1

<input type="checkbox" name="book" id="book" value="book2" class="check">book2

<input type="checkbox" name="book" id="book" value="book3" class="check">book3

<input type="checkbox" name="book" id="book" value="book4" class="check">book4 

<input type="checkbox" name="book" id="book" value="book5" class="check">book5 

<input type="checkbox" name="checkAll" id="checkAll" class="uncheckall">to uncheck
</td></tr></table>
</html>

#Jquery#

$('#tab1 .uncheckall').click(function(){
if($('.uncheckall').is(':checked')){
    $('.check').prop('checked', false);
}  
else {
    $('#tab1 .check').click(function(){
        $('.unckeckall').prop('checked', false);
    }); 

}

});

How to uncheck the 'touncheck' box when other remaining boxes are checked back?
you can check here [http://jsfiddle.net/420/pzCcE/345/]

4 个答案:

答案 0 :(得分:0)

$('.uncheckall').click(function(){
   if($('.uncheckall').is(':checked')){
        $('.check').prop('checked', false);
   }
});
$('.check').click(function(){
    $('.uncheckall').prop('checked', false); // misspelling here. 
});

你的班级选择器拼写错误。而不是'uncheckall',这是unckeckall。

演示:

http://jsfiddle.net/9zxxgnq0/

答案 1 :(得分:0)

您拼错了uncheckall,并且您可以使用change()事件代替click(),以使其适用于键盘/移动用户。

$('#tab1 .uncheckall').change(function(){
    if($('.uncheckall').is(':checked')){
        $('.check').prop('checked', false);
    }  
});

$('#tab1 .check').change(function(){
    if($(this).val())
        $('.uncheckall').prop('checked', false);
}); 

另见http://jsfiddle.net/pzCcE/347/

(我还注意到uncheckall复选框的名称是checkall - 这非常令人困惑......会建议改变它)

答案 2 :(得分:0)

你有两个问题

1)在取消选中取消选中时,您应该有uncheckall而不是unckeckall的拼写错误。

2)您只是检查click的{​​{1}},因此不会检查其他复选框。我点击了所有复选框。

uncheckAll

DEMO

答案 3 :(得分:0)

改为使用更改:

$('#tab1 .uncheckall').change(function(){
    $('.check').prop('checked', false);
});
$('#tab1 .check').change(function(){
    $('.uncheckall').prop('checked', false);
});

jsfiddle(代码缩短)