jQuery实用案例之全选反选操作

最新推荐文章于 2021-12-28 23:36:10 发布

小龙爷ღ

最新推荐文章于 2021-12-28 23:36:10 发布

阅读量386

点赞数 1

分类专栏： JQuery 文章标签：全选反选 jquery的全选反选

本文链接：https://blog.csdn.net/qq_45086879/article/details/100126378

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天带来jQuery的第一个案例：全选反选

三个我觉得比较要注意的点：

①.实现反选功能的时候，先遍历每一个checkbox，然后进行状态反转this.checked = !this.checked;

<script>
//3. 点击'反选': 改变所有爱好的勾选状态
        $("#checkedRevBtn").click(function () {
            $items.each(function () {
                this.checked = !this.checked;
            })
            $("#checkedAllBox").prop("checked", $items.filter(':not(:checked)').length===0);
        })
</script>

②注意this.checked这里的this是一个dom元素，原生js中获取checkedbox的状态为：dom元素.checked

注意$(this)是一个jQuery对象， jQuery中获取checkedbox的状态为: $("选择器").prop("checked")

<script> 
   // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        $checkedAllBox.click(function () {
            $items.prop("checked", this.checked);
            $items.prop("checked", $(this).prop("checked"));
            console.log(this);
            console.log($(this));
            console.log(this.checked);
            console.log($checkedAllBox.prop("checked"));
        })
</script>

让我们看下控制台this、$(this)、this.checked、$(checkedAllBox).prop("checked")分别是什么，需要点击全选按钮

可以看到this是dom元素，$(this)是jQuery对象，原生js和jQuery获取checkedbox的方法等效

③ filter过滤器：这个案例中使用过滤器处理没有被选中的复选框

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

总案例如下：

<!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="反　选"/>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        /*
  功能说明:
  1. 点击'全选': 选中所有爱好
  2. 点击'全不选': 所有爱好都不勾选
  3. 点击'反选': 改变所有爱好的勾选状态
  4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  */
        var $checkedAllBox = $('#checkedAllBox')
        var $items = $(':checkbox[name=items]')
        //1.点击'全选': 选中所有爱好
        $("#checkedAllBtn").click(function () {
            $checkedAllBox.prop("checked", true);
            $items.prop("checked", true);
        })
        //2. 点击'全不选': 所有爱好都不勾选
        $("#checkedNoBtn").click(function () {
            $checkedAllBox.prop("checked", false);
            $items.prop("checked", false);
        })
        //3. 点击'反选': 改变所有爱好的勾选状态
        $("#checkedRevBtn").click(function () {
            $items.each(function () {
                this.checked = !this.checked;
            })
            $("#checkedAllBox").prop("checked", $items.filter(':not(:checked)').length===0);
        })
        // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        $checkedAllBox.click(function () {
            $items.prop("checked", this.checked);
            console.log(this);
            console.log(this.checked);
            console.log($checkedAllBox.prop("checked"));
        })
        // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        $items.click(function () {
            $("#checkedAllBox").prop("checked", $items.filter(':not(:checked)').length === 0);
        })
    })
</script>
</body>
</html>

总结：这是一个很实用的案例，比如菜单选项，京东购物车选项，第一个案例，继续加油

小龙爷ღ

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实用案例之全选反选操作

今天带来jQuery的第一个案例：全选反选三个我觉得比较要注意的点： ①.实现反选功能的时候，先遍历每一个checkbox，然后进行状态反转this.checked = !this.checked;<script>//3. 点击'反选': 改变所有爱好的勾选状态 $("#ch...
复制链接

扫一扫

专栏目录