在開發過程中,會遇到需要進行一個checkbox對多個checkbox進行全選/反選的邏輯

假如有一個網頁,是這樣的

<input id='selectAll'/><label for='selectAll'>全選</label>
<input type='button' id='reselect'/>反選
<input class='day' id='monday'/><label for='monday'>星期一</label>
<input class='day' id='tuesday'/>
 
<label for='tuesday'>星期二</label>
<input class='day' id='wednesday'/><label for='wednesday'>星期三</label>
<input class='day' id='thrusday'/><label for='thrusday'>星期四</label>
<input class='day' id='friday'/><label for='friday'>星期五</label>
<input
 
 class='day' id='saturday'/><label for='saturday'>星期六</label>
<input class='day' id='sunday'/><label for='sunday'>星期日</label>

點選全選全部選中或者全部不選中下面所有的checkbox

$('#selectAll').on('click', function() {
    $('.day').prop('checked', $(this).prop('checked'));
});

點選每一個checkbox時,檢查是否已經全選

$('.day').on('click', function() {
    $('#selectAll').prop('checked', $('.day').length == $('.day:checked').length);
});

點選反選

$('#reselect').on('click', function() {
    $('.day').each(function() {
        $(this).prop('checked', !$(this).prop('checked'));
    });
});