2022-06-20 jQuery案例:全选

原创已于 2022-10-06 13:13:24 修改 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #jq

于 2022-06-20 22:00:20 首次发布

项目与应用同时被 2 个专栏收录

67 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

本文介绍如何使用jQuery实现HTML复选框的全选功能，当用户点击全选框时商品列表随之切换，并且每个商品复选框的独立点击事件会联动全选。通过简单的代码示例展示如何满足需求一：全选和全不选，以及需求二：商品全部选中时全选复选框选中。

要求

1.勾选全选复选框,商品列表的复选框也跟着被选中
2.每个商品复选框也有单独的点击事件,当每一个商品复选框都被选中时,全选复选框也自动被选中
在这里插入图片描述

代码

html

<div id="box">
    <label for="">全选</label>
    <input type="checkbox" id="all">
    <hr>
    <div id="goods">
        <input type="checkbox">
        <label for="">商品1</label><br>
        <input type="checkbox">
        <label for="">商品2</label><br>
        <input type="checkbox">
        <label for="">商品3</label><br>
        <input type="checkbox">
        <label for="">商品4</label><br>
        <input type="checkbox">
        <label for="">商品5</label><br>
    </div>
</div>

jQuery

// 需求1:点击all,把goods中的所有checkbox选中
$("#all").click(function() {
    var checkedVal = $("#all").prop("checked"); //获取#all的选中状态
    // console.log(checkedVal);
    $("#goods input[type='checkbox']").prop("checked", checkedVal); //以#all的选中状态做为是否让商品选中的标准
});
// 需求2:每个商品复选框有单独的点击事件,当它们分别都被选中时,#all也变为选中状态
$("#goods input").click(function() {
    var num = $("#goods input:checked").length; //已被选中的商品复选框数量
    // if (num == $("#goods input").length) { //num=5时
    //     $("#all").prop("checked", true);
    // } else {
    //     $("#all").prop("checked", false);
    // }
    /*判断条件可优化如下:*/
    $("#all").prop("checked", num == $("#goods input").length);
});