用jQuery编写爱好选择器，全选/全不选/反选

功能说明:
1.点击’全选’:选中所有爱好
2.点击’全不选’:所有爱好都不勾选
3.点击’反选’:改变所有爱好的勾选状态
4.点击’提交’:提示所有勾选的爱好
5.点击’全选/全不选:选中所有爱好，或者全不选中
6.点击某个爱好时，必要时更新’全选/全不选’的选中状态

<form action="" method="post">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球

    <br/>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="sendBtn" value="t提交"/>
</form>

          var $checkedAllBox=$('$checkedAllBox')
        var $items=$(':checkbox[name=items]')
        //1.点击'全选':选中所有爱好
$('#checkedAllBtn').click(function () {
    $items.prop('checked', true)
    $checkedAllBtn.prop('checked',true)
})
//2.点击全不选:所有爱好都不勾选
$('#checkedNoBtn').click(function () {
$items.prop('checked', false)
$checkedAllBtn.prop('checked',false)
})
//3.点击'反选':改变所有爱好的勾选状态
$('#checkedRevBtn').click(function () {
    $items.each(function(){
        this.checked=!this.checked
    })
    $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)

})
//4.点击'提交':提示所有勾选的爱好
$('#sendBtn').click(function(){
    $items.filter(':checked').each(function(){
        alert(this.value)
    })
})

//5.点击'全选/全不选:选中所有爱好，或者全不选中
$('#checkedAllBtn').click(function () {
    $items.prop('checked',this.checked)
})
//6.点击某个爱好时，必要时更新'全选/全不选'的选中状态
$items.click(function(){
    $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
})

用js代码编写可以查看这个文档：
https://blog.youkuaiyun.com/m0_53679993/article/details/124157321
可以看出用jQuery时多么方便。