【jQuery】jQuery实现checkbox的全选/反选逻辑

在开发过程中,会遇到需要进行一个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'));
    });
});