Проверить все флажки не работают при втором использовании

Question

Я пытаюсь создать список флажков с флажком Все и Нет в конце.

При нажатии этих флажков происходит довольно тяжелая операция, поэтому очень важно, чтобы процесс проверки и снятия отметки не вызывал флажок для каждого дочернего элемента.

Вот мой 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

EDIT:

На второй мысли я кормить не нужно 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'); 
});