文档章节

多选框的全选、全不选、反选

MissGu
 MissGu
发布于 2015/04/12 21:59
字数 698
阅读 2227
收藏 13
点赞 0
评论 0

要实现多选框的选择相关映射,要实现以下逻辑:

    1、全选框被点击时,所以子选框被选中。

    2、当全选状态下,子选框的其中一个撤销点击,全选框自动unchecked

    3、为全选状态下,子选框一个个全部选中,最后一个子选框框点击之后,全选框自动checked

var information=$("#"+flag).find(".information");
 var $newsCheck = information.find("input[name='newsCheck']");
//多选框全选与全不选
$(".all").click(function(){

        if(this.checked){
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=true;});
        }else{
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=false;});
        }
    }
);
//子选框反选
$("input[name='newsCheck']").click(function() {
    var temp=document.getElementsByClassName("all");
    for(var i=0;i<temp.length;i++){
       if(temp[i].id == flag+"All"){
           temp[i].checked=($newsCheck.length ==information.find("input[name='newsCheck']:checked").length ? true : false);
       }
    }
});
<div id="informContent">
    <div class="informTitle title-blue">新闻动态</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="informContentAll"><span>全选</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton" id="newsPB"><img src="images/content/news.png"></div>
        </div>

        <div class="lists">
         <div class="informList">
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
        <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
            
        </div>
    </div>
</div>
<div id="activityContent">
    <div class="informTitle title-red">活动动态</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="activityContentAll"><span>全选</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton"  id="activityPB"><img src="images/content/tianjia.png"></div>
        </div>

        <div class="lists">
            <div class="informList">
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                 </div>
        </div>
    </div>
</div>

这里我要做一些解释,我在一个页面中涉及了两组多选框,而两组复选框的相关class名称我全都命名为一样,算是想做一个通用的复选样式吧。

$(".all")表示两组复选框的全选checkbox,而两组的子选框name都为newsCheck。变量flag information是用于区分两组多选框的变量。flag有两种值:”informContent“ 和 ”activityContent“,至于具体值怎么转换就要看每个人的项目了。


© 著作权归作者所有

共有 人打赏支持
MissGu
粉丝 3
博文 5
码字总数 2899
作品 0
北碚
單選,多選操作

js获取单选框、复选框的值及操作 前天昨天今天明天后天提交 前年去年今年明年后年提交全选反选全不选

十月的星空 ⋅ 2014/05/27 ⋅ 0

jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)

ylbtech-jQuery:jQuery学习 jQuery语法实例 复选框应用 效果截图 jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部 $("#checkedAll").click(funct...

吞吞吐吐的 ⋅ 2017/11/08 ⋅ 0

jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89 ⋅ 2011/10/07 ⋅ 0

jquery两个方法作用于同一个复选框时,会有一个方法失效

需要实现的功能是: 1.实现父选框改变时子选框的全选与反选 2.选择子选矿时,父选框要被自动勾选,而父选框下的子选框都被取消时,父选框自动取消勾选。 现在功能1和功能2可以被实现其中的一...

6幽灵9 ⋅ 2017/03/16 ⋅ 1

微信小程序实现购物车页面

设计思路: 一、从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二、点击复选框toggle操作 如已经选中的,经...

Jansens ⋅ 2016/10/25 ⋅ 0

jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

这篇文章主要介绍了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法,通过使用prop方法代替attr方法来解决此问题,需要的朋友可以参考下 本文实例讲述了jQuery中...

码农般的学良 ⋅ 2016/11/25 ⋅ 0

前端JQuery基础

一、查找元素 1、常用选择器 1.1 基本选择器 $("*") $("#id")$(".class")$("element")$(".class,p,div") 1.2层级选择器 $(".outer div") // 所有的后代$(".outer>div") // 所有的子代 $(".ou......

炫维 ⋅ 2017/10/27 ⋅ 0

汇总常用的jQuery操作Table tr td方法

1.鼠标移动行变色 方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能 $("#table1 tr").hover(function(){ $(this).children...

皮蛋瘦肉粥里没有粥 ⋅ 2015/03/24 ⋅ 0

jquery对table表格的常用操作

一、删除行 ? 1 2 3 4 //删除除第一行外的所有行 $("#table1 tr:not(:first)").remove(); //删除指定行 $("#table1 tr:eq(3)").remove(); 二、删除一列 ? 1 2 3 4 5 //删除除第一列外的所有列...

问题达人 ⋅ 2016/03/31 ⋅ 0

checkbox的常用操作

声明:如果你想去看具体的例子,请下载压缩包:checkbox-demo.rar就行了! 里面包括checkbox的基本操作的例子,以及一个淘宝的小例子!! Checkbox的操作基本上就几种:选中,未选中,全选,...

技术小胖子 ⋅ 2017/10/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

线程池

一、线程池:提供了一个线程队列,队列中保存着所有等待状态的线程。避免了创建与销毁额外开销,提高了响应的速度。 二、线程池的体系结构: java.util.concurrent.Executor : 负责线程的使用...

stars永恒 ⋅ 29分钟前 ⋅ 0

你值5K还是15K?实战案例,测测你的分析功力

本文源自陈老师遇到的真实案例。 老板说:“我们今年准备参加展会,做一年。以前我没参加过,没关系,这里有一份展会数据,你回去分析下哪些有价值,后边组织的时候有个指导”。现在你收到任...

加米谷大数据 ⋅ 31分钟前 ⋅ 0

中文转英文功能

package com.sysware.task.util;import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;import net.sourceforge.pinyin4j.for......

AK灬 ⋅ 32分钟前 ⋅ 0

JNI Java层类关联C/C++层的类

Android开发时,因为要实现某某功能,需要集成算法公司的算法库(so库),这就需要自己编写JNI。 通常这些库提供的接口可以概况成1、初始化 2、算法处理 3、释放 4、打印版本号 初始化后会返...

国仔饼 ⋅ 35分钟前 ⋅ 0

maven下载jar包改为阿里云的maven库

一:修改maven安装路径中conf文件夹下的setting.xml文件 <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/......

夜醒者 ⋅ 35分钟前 ⋅ 0

电商用户行为分析大数据平台相关系列10-基础数据结构分析

电商用户行为分析大数据平台相关系列1-环境介绍 电商用户行为分析大数据平台相关系列2-HADOOP环境搭建 电商用户行为分析大数据平台相关系列3-HIVE安装 电商用户行为分析大数据平台相关系列4...

xiaomin0322 ⋅ 36分钟前 ⋅ 0

使用readLine()方法遇到的坑

下午玩 TCP/IP 的 Socket 通信时,使用 BufferedReader 的 readLine() 遇到了一个坑,现在终于解决了,特此记录下来。 程序很简单,客户段从控制台读取用户输入,然后发送至服务器端,主要代...

孟飞阳 ⋅ 36分钟前 ⋅ 0

基于Hadoop集群的Hive安装配置(Derby数据库)

Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据,提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行(具体的Hive架构大家自行搜索)。接下来主要讲下Hadoop集群下...

海岸线的曙光 ⋅ 37分钟前 ⋅ 0

CoreOS裸机iso安装和相关配置

裸机通过iso安装CoreOS,个人趟了很多坑,以下就是完整的从零开始部署和配置的过程,希望对大家有用。 一、安装CoreOS到硬盘 1. 准备Live iso镜像,制作好usb启动盘 Live iso下载地址 2. 搭建...

ykbj ⋅ 42分钟前 ⋅ 0

jquery控制表格锁列(转)

表格已经完成后新加的需求,要实现锁表格的第一列。很多带这种效果的都是js封装的框架或者具体某种框架的组件,不适用解决当前问题。作为后端开发又实在不熟样式,搜到了一个可以用的,虽然样...

刘昌鑫 ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部