проверить все и снять отметку со всех флажков

Question

Мне нужно, чтобы у вас есть возможность щелкнуть по кнопке btn и выбрать все флажки, а затем щелкнуть по ней еще раз и снять все флажки. но мой код ниже проверит только все и снимет все раз. почему он перестает работать?

<script> 
$('document').ready(function(){ 
$("#btn").on("click", function() { 
     var $checkbox = $(".checkBoxClass"); 
     $checkbox.attr('checked', !$checkbox.attr('checked')); 
}); 
}); 

</script> 
<span id="btn">btn</span><br /><br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox1" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox2" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox3" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox4" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox5" /> 
     <br /> 

Answer 1

Что вы ожидаете !$checkbox.attr('checked'), чтобы вернуться? Потому что $checkbox.attr('checked') возвращает 'checked' или ничего.

Вы должны использовать prop не attr для этого, как это truey/falsy

$('document').ready(function(){ 
    $("#btn").on("click", function() { 
     var $checkbox = $(".checkBoxClass"); 
     $checkbox.prop('checked', !$checkbox.prop('checked')); 
    }); 
}); 

так что теперь !$checkbox.prop('checked') возвращает true или false, которые вы можете законно назвать ! против

Answer 2

насчет ...

$('#btn').on('click', function() { 
    $('.checkBoxClass').each(function() { 
     $(this).is(':checked') ? $(this).removeAttr('checked') : $(this).attr('checked','checked'); 
    }); 
});