jQuery练习1--爱好选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1, #content1 {
            background-color: #ffcc00;
        }

        #tab2, #content2 {
            background-color: #ff00cc;
        }

        #tab3, #content3 {
            background-color: #00ccff;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        $(function(){
            /*
             功能说明:
             1. 点击'全选': 选中所有爱好
             2. 点击'全不选': 所有爱好都不勾选
             3. 点击'反选': 改变所有爱好的勾选状态
             4. 点击'提交': 提示所有勾选的爱好
             5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
             6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
             */
            var $items = $(':checkbox[name=items]');
            // 1. 点击'全选': 选中所有爱好
            $('#checkedAllBtn').click(function(){
                $items.each(function () {
                    $(this).prop('checked',true);
                })
                $('#checkedAllBox').prop('checked',true);
            });

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

            // 3. 点击'反选': 改变所有爱好的勾选状态 只有当所有item都是选中的状态时，才选中checkAllBox
            $('#checkedRevBtn').click(function(){
                $items.each(function () {
                    this.checked = !this.checked;
                });
                if($items.filter(':checked')){
                    $('#checkedAllBox').prop('checked',$items.not(':checked').length === 0);
                }
            })
            // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
            $('#checkedAllBox').click(function () {
                $items.prop('checked',this.checked);
            })
            // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
            $items.click(function () {
                $('#checkedAllBox').prop('checked',$items.not(':checked').size()===0);
            })

            // 6. 点击'提交': 提示所有勾选的爱好
            $('#sendBtn').click(function () {
                $items.filter(':checked').each(function(){
                    console.log($(this).val());
                })
            })
        })
    </script>
</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>
</body>
</html>
在这里插入图片描述
jiaody111
发布了119 篇原创文章 · 获赞 1 · 访问量 3977
私信关注
jQuery练习1--爱好选择器

猜你喜欢
