jQuery爱好选择器

大陈&

于 2021-09-12 17:54:07 发布

阅读量101

点赞数 1

分类专栏：笔记 JQ 文章标签： jquery

本文链接：https://blog.csdn.net/dad188/article/details/120253592

版权

笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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.min.js"></script>
<script type="text/javascript">
    /*
     功能说明:
     1. 点击'全选': 选中所有爱好
     2. 点击'全不选': 所有爱好都不勾选
     3. 点击'反选': 改变所有爱好的勾选状态
     4. 点击'提交': 提示所有勾选的爱好
     5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
     6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
     */
    var $checkedAllBox = $('#checkedAllBox')
    var $items = $(':checkbox[name=items]')

    // 1. 点击'全选': 选中所有爱好
    $('#checkedAllBtn').click(function () {
        $items.prop('checked', true)
        $checkedAllBox.prop('checked', true)
    })

    // 2. 点击'全不选': 所有爱好都不勾选
    $('#checkedNoBtn').click(function () {
        $items.prop('checked', false)
        $checkedAllBox.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. 点击'全选/全不选': 选中所有爱好, 或者全不选中
    $checkedAllBox.click(function () {
        $items.prop('checked', this.checked)
    })

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

大陈&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery爱好选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/>
复制链接

扫一扫

专栏目录