jQuery 属性操作：购物车案例模块—全选

最新推荐文章于 2023-02-02 23:48:46 发布

没人回复我哼

最新推荐文章于 2023-02-02 23:48:46 发布

阅读量835

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/106041119

版权

本文介绍如何使用jQuery实现购物车的全选功能。当点击全选按钮时，所有小复选框被选中；反之，如果所有小复选框被选中，全选按钮也应选中。思路包括通过checked属性同步全选按钮和小复选框的状态，并通过选择器判断被选中的表单元素数量来更新全选按钮的状态。

摘要由CSDN通过智能技术生成

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
在这里插入图片描述
点击全选按钮时下面的小复选框全部选中或者下面的小复选框全部选中时全选按钮选中

小复选框按钮未全部选中时，全选按钮不选中

思路
1.里面3个小的复选框按钮选中状态（checked）跟着全选按钮（checkall）走
2.因为 checked 是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。
3.把全选按钮状态赋值给小复选框就可以了。
4.当我们每次点击小的复选框按钮，就来判断：
(1).如果小复选框被选中的个数等于购物车商品的种类数，就应该把全选按钮选上，否则全选按钮不选。
(2). :checked选择器 :checked查找被选中的表单元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模拟购物车案例</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        table {
   
            border: