zoukankan      html  css  js  c++  java
  • 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'); // 返回指定的祖先元素

    四 总计件数   和 总金额 模块

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

    五  选中商品添加背景

  • 相关阅读:
    如何优雅地使用 Stack Overflow
    Quartz总结
    slf4j-api、slf4j-log4j12以及log4j之间什么关系?
    eclipse 安装 spring boot suite 插件遇到的问题
    Java项目结构总结
    netstat 与 telnet
    微服务架构中的安全认证与鉴权
    git 常用命令
    session 、cookie、token的区别
    List和Set区别
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14496498.html
Copyright © 2011-2022 走看看