2022-06-20 jQuery案例:全选-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125381492

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求

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);
});