文档章节

【原创】全选/取消全选-全选下的选项反作用于全选

柴高八斗之父
 柴高八斗之父
发布于 2018/02/28 15:03
字数 1145
阅读 26
收藏 1

功能实现:

  1. 点击全选,后面check项,全部勾选或者全部取消;(全选check 作用于 子check项)
  2. 如果后面check项,全部勾选,全选check则勾选;(子check项 反作用于 全选check)
  3. 如果后面check项,未全部勾选,全选check勾选状态去掉;(子check项 反作用于 全选check)

先看截图吧,

js如下: 

  1. 定义成公共的函数,供需要相同功能的对象使用;(面向对象,对象类是一种优秀的编程思想,要逐步改掉面向过程的编程方式。)
  2. 改变属性最好使用prop
  3. 特别注意:为了代码更完善,此js特别考虑了:check项对check全选的反作用。判断条件是已选状态的项全部项来比较,
  4. 在设置checkbox时,prop 比 attr 有更好的兼容性;
  5. 在设置 checked ,“checked”方式不建议。兼容性更好的是checked,true,这点在w3c中明确表示checked的值是个布尔值。
$(function(){

        //全选与否
        function checkall(obj){
            obj.click(function(){
                if(obj.is(':checked')){
                    $(this).parent().next().find(":checkbox").prop("checked", true);
                }
                else{
                    $(this).parent().next().find(":checkbox").prop("checked", false);
                }
            });

            //子项反向作用到全选状态
            var checkInSpan = obj.parent().next().find(":checkbox");
            checkInSpan.click(function(){
                var checkNum = obj.parent().next().find(":checkbox").length;
                var checkedNum = obj.parent().next().find("input:checked").length;
                if(checkedNum < checkNum){
                    obj.prop("checked", false);
                };
                if(checkedNum == checkNum){
                    obj.prop("checked", true);
                }
            })
        };

   
       //函数调用-服务类型
        var serviceTypeAll = $("#serviceTypeAll");
        checkall(serviceTypeAll);

       //函数调用-门店
        var storeAll = $("#storeAll");
        checkall(storeAll);


    })

html如下:

<div class="row">
    <div class="col-md-2 otoc-textright otoc-p-t-15">服务类型:</div>
    <div class="col-md-10  otoc-p-t-10">
        <div class="md-checkbox-inline">
            <div class="md-checkbox">
                <input type="checkbox" id="serviceTypeAll" class="md-check" >
                <label for="serviceTypeAll">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>全部
                </label>
            </div>
            <span> <!--包含子check项的容器-->
                <div class="md-checkbox">
                    <input type="checkbox" id="service01" class="md-check" >
                    <label for="service01">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>保养
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service02" class="md-check">
                    <label for="service02">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>洗车
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service03" class="md-check">
                    <label for="service03">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>维修
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service04" class="md-check">
                    <label for="service04">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>美容
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service05" class="md-check">
                    <label for="service05">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>事故
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service06" class="md-check">
                    <label for="service06">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>钣喷
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service07" class="md-check">
                    <label for="service07">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>轮胎
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service08" class="md-check">
                    <label for="service08">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>其他
                    </label>
                </div>
            </span>
        </div>
    </div>
</div>
<div class="row">
	<div class="col-md-2 otoc-textright otoc-p-t-15">门店:</div>
	<div class="col-md-10 otoc-p-t-10">
    <div class="md-checkbox-inline">
        <div class="md-checkbox">
            <input type="checkbox" id="storeAll" class="md-check" >
            <label for="storeAll">
                <span class="inc"></span>
                <span class="check"></span>
                <span class="box"></span>全部
            </label>
        </div>
        <span>
            <div class="md-checkbox">
                <input type="checkbox" id="store01" class="md-check" >
                <label for="store01">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧车乐金水路店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store02" class="md-check" >
                <label for="store02">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧车乐车源店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store03" class="md-check" >
                <label for="store03">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧车乐西店店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store04" class="md-check" >
                <label for="store04">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧车乐梅林店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store05" class="md-check" >
                <label for="store05">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧车乐锐骑店
                </label>
            </div>
        </span>
    </div>
</div>
</div>

延伸话题:不受页面dom布局结构影响

此例以上的js代码的弊端,虽然可以实现全选/反选的功能,但是要严格遵守dom结构,这样js才能顺利找到对应的节点来操作。

 

完善后的js代码如下:

         //2个参数---不受页面dom结构的变化影响
        //参数说明:
        //obj        : 为全选check;
        //objChildren: 为包含子checkbox的容器
        function otoc_checkall(obj,objChildren){
            obj.click(function(){
                if(obj.is(':checked')){
                    objChildren.find(":checkbox").prop("checked", true);
                }
                else{
                    objChildren.find(":checkbox").prop("checked", false);
                }
            });

            //子项反向作用到全选状态
            var objChildren_all = objChildren.find(":checkbox");
            objChildren_all.click(function(){
                var checkNum = objChildren.find(":checkbox").length;
                var checkedNum = objChildren.find("input:checked").length;
                if(checkedNum < checkNum){
                    obj.prop("checked", false);
                };
                if(checkedNum == checkNum){
                    obj.prop("checked", true);
                }
            })
        };


		//引用
        var serviceTypeAll = $("#serviceTypeAll"); 
        var serviceTypeAll_children = $("#serviceTypeAll_children");
        otoc_checkall(serviceTypeAll,serviceTypeAll_children);

 

© 著作权归作者所有

柴高八斗之父
粉丝 4
博文 211
码字总数 118390
作品 0
宁波
前端工程师
私信 提问
jquery全选小功能

背景需求:全选,取消全选,以及全部选中后自动勾选全选,全选后取消一个时同时自动取消全选(不知道怎么描述这个功能,就这么解释吧。。。) html代码如下: <input type="checkbox" id="c...

奔跑的菜菜
2015/10/14
95
2
小博老师演示常用JQuery效果 ——复选框全选和反选效果

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [步骤解读一]界面布局...

博为峰教研组
2016/11/18
39
0
jquery如何判断checkbox(复选框)是否被选中

都知道 在html 如果一个复选框被选中 是 checked="checked"。 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断 if($("#id").attr("ch......

老鸟的空间
2014/08/05
91
0
vue多级复杂列表展开/折叠,全选/分组全选实现

首先,来看下效果图 在线体验地址: https://hxkj.vip/demo/multipleList/。温馨提示,打开之后按 ,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: 1.第一层级中包含直属...

_TSY_
2018/11/04
0
0
jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn]) --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn]) --> 当元素失去焦点时,触发 blur 事件...

frwupeng517
2016/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos 查看删除旧内核

1、查看系统中安装的内核 $ yum list installed | grep kernel 2、删除系统中旧内核 $ yum install yum-utils$ package-cleanup --oldkernels --count=2...

编程老陆
52分钟前
8
0
ES6

ES6:不改变原理的基础上,让API变得更简单 一、let:代替var用于声明变量 1、var的缺点: (1)声明提前 (2)没有块级作用域 2、let的优点: (1)组织了申明提前 (2)让let所在的块({}),...

wytao1995
今天
3
0
kubernetes 环境搭建 —— minikube

创建集群 minikube start 搭建好 k8s 集群后,可以查看集群的状态以及部署应用。主要用到的是 k8s 的 api,这通常需借助于 kutectl 命令行工具 基本操作 kubectl versionkubectl cluster-i...

lemos
今天
10
0
关于js混淆与反混淆还原操作

使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护。 1、为什么...

开源oschina
今天
12
0
用盛金公式解三次方程(ansi c版)

/* cc cubic.c -lm gcc cubic.c -lm Shengjin's Formulas Univariate cubic equation aX ^ 3 + bX ^ 2 + cX + d = 0, (a, b, c, d < R, and a!= 0). Multiple root disc......

wangxuwei
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部