jquery 全选功能

1）思路

//1 小的复选框按钮状态是跟着  全选复选框的状态的

//2 小的

一全选按钮

代码

    //1 全选按钮影响子按钮
    $(".checkall").change(function () {
        //把全选按钮的checked值赋值给三个小的复选框
        $(".j-checkbox,.checkall").prop(\'checked\',$(this).prop("checked"));
    });

    //2 子按钮影响全选按钮
    $(".j-checkbox").change(function () {
        // if (被选中的个数 === 3) {
        //     全选按钮选中
        // } else {
        //      全选按钮不选中
        // }
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length)  {
            $(".checkall").prop(\'checked\',true);
        } else {
            $(".checkall").prop(\'checked\',false);
        }
    });

二增减商品数量分析

代码

 //3 增加商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function () {
        //得到当前加号 兄弟文本框的值
        var n = $(this).siblings(\'.itxt\').val();
        n++;
        $(this).siblings(\'.itxt\').val(n);//加加后再赋值给文本框
    });
    
    //4 减少商品数量模块
    $(".decrement").click(function () {
        var n = $(this).siblings(\'.itxt\').val();
        if (n == 1) {
            return false;//遇到return 后面的代码就不执行了
        };
        n--;
        $(this).siblings(\'.itxt\').val(n);
    });

三修改商品价格小计

快捷查找自己父亲

parents(\'className\'); // 返回指定的祖先元素

四总计件数和总金额模块

// 把每个商品的个数加起来 = 总计 [ 用到遍历 ]

// 把每个商品的小计金额加起来 = 总金额 [ 用到遍历 ]

五选中商品添加背景