实战/04-爱好选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱好选择器</title>
</head>
<body>
<form>
    你爱好的运动是？<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="提交"/>
</form>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function () {
        // 功能说明：
        var $checkedAllBox = $('#checkedAllBox'); // ID选择器
        var $items = $(':checkbox[name=items]'); // 表单选择器、过滤选择器、交集选择器
        // 1.点击'全选'：选中所有爱好
        var $checkedAllBtn = $('#checkedAllBtn');
        $checkedAllBtn.click(function () { // click函数
            $items.prop('checked', true); // prop操作属性
            $checkedAllBox.prop('checked', true);
        });

        // 2.点击'全不选'：所有爱好都不勾选
        var $checkedNoBtn = $('#checkedNoBtn');
        $checkedNoBtn.click(function () {
            $items.prop('checked', false);
            $checkedAllBox.prop('checked', false);
        });

        // 3.点击'反选'：改变所有爱好的匀选状态
        var $checkedRevBtn = $('#checkedRevBtn');
        $checkedRevBtn.click(function () {
            $items.each(function () { // each函数
                this.checked = !this.checked;
            });
            $checkedAllBox.prop('checked', $items.not(':checked').length === 0); // not过滤方法
        });

        // 4.点击'提交'：提示所有勾送的爱好
        var $sendBtn = $('#sendBtn');
        $sendBtn.click(function () {
            var arr = [];
            $items.filter(':checked').each(function () { // filter过滤方法
                arr.push(this.value); // 数组push方法
            });
            alert(arr.join(',')); // 数组join方法
        });

        // 5.点击'全选/全不选'：选中所有爱好，或者全不选中
        var $checkedAllBox = $('#checkedAllBox');
        $checkedAllBox.click(function () {
            $items.prop('checked', this.checked);
        });

        // 6.点击某个爱好时，必要时更新'全选/全不选'的选中状态
        $items.click(function () {
            $checkedAllBox.prop('checked', $items.not(':checked').length === 0);
        });
    });
</script>
</body>
</html>