檢查所有複選框在第二次使用時不起作用

Question

我試圖在最後使用All和None複選框創建複選框列表。

當點擊這些複選框時，會有相當繁重的操作，所以檢查和取消選中過程不會在每個子複選框上引發單擊事件至關重要！

這裏是我的JS：

$(document).ready(function(){ 
    $('#AllCheckbox').click(function(){        
    $('#NoneCheckbox').removeAttr('checked'); 
    $('.TypeCheckbox').attr('checked', 'checked');           
}); 

$('#NoneCheckbox').click(function(){ 
    $('#AllCheckbox').removeAttr('checked'); 
    $('.TypeCheckbox').removeAttr('checked');     
}); 

$('.TypeCheckbox').click(function(){ 
    alert('Type checkbox was clicked'); 
    $('#AllCheckbox').removeAttr('checked'); 
    $('#NoneCheckbox').removeAttr('checked'); 
    }); 
}); 

這裏是我的html：

<label for="1Checkbox">1</label><input type="checkbox" ID="1Checkbox" class="TypeCheckbox" /> 
<label for="2Checkbox">2</label><input type="checkbox" ID="2Checkbox" class="TypeCheckbox" /> 
<label for="3Checkbox">3</label><input type="checkbox" ID="3Checkbox" class="TypeCheckbox" /> 
<label for="AllCheckbox">All</label><input type="checkbox" ID="AllCheckbox" /> 
<label for="NoneCheckbox">None</label><input type="checkbox" ID="NoneCheckbox" /> 

我創建了一個JSFiddle。

如果點擊「全部」，它會很好用，所有編號的複選框都會被選中。然後再次點擊「無」，然後點擊「全部」，第二次檢查編號複選框。爲什麼不？

Answer 1

使用.prop()而不是.attr()

例

$('.TypeCheckbox').prop('checked', true/false); 

我很能說明問題，在.prop() vs .attr()給出做訪問它。

Working Fiddle

編輯：

關於第二個想法我餵你不需要None複選框看到DEMO

Answer 2

使用.prop()

$(document).ready(function() { 
$('#AllCheckbox').click(function() { 
    $('#NoneCheckbox').prop('checked',false); 
    $('.TypeCheckbox').prop('checked', "checked"); 
}); 

$('#NoneCheckbox').click(function() { 
    $('#AllCheckbox').prop('checked',false); 
    $('.TypeCheckbox').prop('checked',false); 
}); 

$('.TypeCheckbox').click(function() { 
    alert('Type checkbox was clicked'); 
    $('#AllCheckbox').prop('checked',false); 
    $('#NoneCheckbox').prop('checked',false); 
}); 
}); 

Demo

Answer 3

使用.prop()這裏是演示鏈接http://jsfiddle.net/dhana36/7hsQ4/2/

Answer 4

你應該使用prop，不attr：

$('#AllCheckbox').click(function() { 
    $('input:checkbox').prop('checked', 'checked'); 
}); 

$('#NoneCheckbox').click(function() { 
    $('input:checkbox').removeAttr('checked'); 
});