html中全选反选
<!--第一层-->
<div class="first">
<div class="first_top">
<img src="../img/chartor4.png" class="first-img" />
<input type="checkbox" name="resUuids" value="" id="all" class="first-inp" />
<span>OM系统</span>
</div>
<!--第二层-->
<div class="second">
<div class="second_top">
<img src="../img/chartor5.png" class="second-img" />
<input type="checkbox" name="resUuid" value="" class="second-inp per-index" />
<span>发货方管理</span>
</div>
<!--第三层-->
<div class="third">
<div class="thired_top">
<input type="checkbox" name="resUuids" value="" class="third-inp"/>
<span>查询货主</span>
</div>
<div class="thired_top">
<input type="checkbox" name="resUuids" value="" class="third-inp"/>
<span>查询货主</span>
</div>
<div class="thired_top">
<input type="checkbox" name="resUuids" value="" class="third-inp" />
<span>查询货主</span>
</div>
</div>
</div>
</div>
.first {
overflow: hidden;
margin-left:10%;
}
.first_top {
font-size: 16px;
}
.first_top img {
float: left;
margin-right: 10px;
cursor: pointer;
}
.first_top input {
width: 18px;
height: 18px;
border:1px solid #ccc;
background: #fff !important;
float: left;
background-color: #f4a100 !important;
margin-right: 10px;
}
.second_top {
font-size: 16px;
margin-left: 4%;
margin-top: 1%;
}
.second_top img {
float: left;
margin-right: 10px;
cursor: pointer;
}
.second_top input {
width: 18px;
height: 18px;
box-sizing: border-box;
border:1px solid #ccc;
background: #fff !important;
float: left;
background-color: #f4a100;
margin-right: 10px;
}
.thired_top {
font-size: 16px;
margin-left: 12%;
margin-top: 1%;
}
.thired_top img {
float: left;
margin-right: 10px;
}
.thired_top input {
width: 18px;
height: 18px;
box-sizing: border-box;
border:1px solid #ccc;
background: #fff !important;
float: left;
background-color: #f4a100;
margin-right: 10px;
}
第一种:子级盒子全选中父级盒子选中
//盒子折叠
//第一层
$(".first-img").click(function(){
$(this).parent().siblings().slideToggle(500);
});
//第二层
$(".second-img").click(function(){
$(this).parent().siblings().slideToggle(500);
}); //全选反选
//第一层全选
$("#all").click(function() {
var op = $(this).parent().siblings().find("input[name='resUuids']");
var pp = $(this).parent().siblings().find("input[name='resUuid']");
op.prop("checked", this.checked);
pp.prop("checked", this.checked); });
//第二层全选
$(".second-inp").click(function() {
var op = $(this).parent().siblings().find("input[name='resUuids']");
op.prop("checked", this.checked);
});
//第三层反选
$(".third-inp").click(function() {
var lb = $(this).parent().parent().find('.third-inp');
var all = $(this).parent().parent().parent().parent().find('.second-inp');
//给第二层盒子加上选中
for(var i=0;i<lb.length;i++){
// if($(lb[i]).prop("checked") == true){
// $(this).parent().parent().siblings().find('.second-inp').prop("checked", true);
// break
// }else{
// $(this).parent().parent().siblings().find('.second-inp').prop("checked", false);
// }
if($(lb[i]).prop("checked") == false){
$(this).parent().parent().siblings().find('.second-inp').prop("checked", false);
break
}else{
$(this).parent().parent().siblings().find('.second-inp').prop("checked", true);
}
} //给第一层盒子加上选中
for(var j=0;j<all.length;j++){
if($(all[j]).prop("checked") == false){
$(this).parent().parent().parent().parent().find('.first-inp').prop("checked", false);
break ;
}else{
$(this).parent().parent().parent().parent().find('.first-inp').prop("checked", true);
}
}
});
//第二层反选
$(".per-index").click(function() {
var nb = $(this).parent().parent().parent().find('.per-index');
for(var i=0;i<nb.length;i++){
if($(nb[i]).prop("checked") == false){
$(".first-inp").prop("checked", false);
return ;
}else {
$(".first-inp").prop("checked", true);
}
}
});
第二种:子级盒子只要有一个被选中父级盒子就被选中
//盒子折叠
//第一层
$(".first-img").click(function(){
$(this).parent().siblings().slideToggle(500);
});
//第二层
$(".second-img").click(function(){
$(this).parent().siblings().slideToggle(500);
}); //全选反选
//第一层全选
$("#all").click(function() {
var op = $(this).parent().siblings().find("input[name='resUuids']");
var pp = $(this).parent().siblings().find("input[name='resUuid']");
op.prop("checked", this.checked);
pp.prop("checked", this.checked); });
//第二层全选
$(".second-inp").click(function() {
var op = $(this).parent().siblings().find("input[name='resUuids']");
op.prop("checked", this.checked);
});
//第三层反选
$(".third-inp").click(function() {
var lb = $(this).parent().parent().find('.third-inp');
var all = $(this).parent().parent().parent().parent().find('.second-inp');
//给第二层盒子加上选中
for(var i=0;i<lb.length;i++){
if($(lb[i]).prop("checked") == true){
$(this).parent().parent().siblings().find('.second-inp').prop("checked", true);
break
}else{
$(this).parent().parent().siblings().find('.second-inp').prop("checked", false);
}
// if($(lb[i]).prop("checked") == false){
// $(this).parent().parent().siblings().find('.second-inp').prop("checked", false);
// break
// }else{
// $(this).parent().parent().siblings().find('.second-inp').prop("checked", true);
// }
} //给第一层盒子加上选中
for(var j=0;j<all.length;j++){
if($(all[j]).prop("checked") == false){
$(this).parent().parent().parent().parent().find('.first-inp').prop("checked", false);
break ;
}else{
$(this).parent().parent().parent().parent().find('.first-inp').prop("checked", true);
}
}
});
//第二层反选
$(".per-index").click(function() {
var nb = $(this).parent().parent().parent().find('.per-index');
for(var i=0;i<nb.length;i++){
if($(nb[i]).prop("checked") == false){
$(".first-inp").prop("checked", false);
return ;
}else {
$(".first-inp").prop("checked", true);
}
}
});
html中全选反选的更多相关文章
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- React中的全选反选问题
全选反选问题 1.在state里维护一个数组,例如showArr:[] 2.绑定点击事件的时候将当前这个当选按钮的index加进来 <span className='arrow' onClick ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选/反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮
效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...
随机推荐
- Java学习之==>泛型
一.什么是泛型 泛型,即“参数化类型”,在不创建新的类型的情况下,通过泛型指定的不同类型来控制形参具体限制的类型.也就是说在泛型使用过程中,操作的数据类型被指定为一个参数,这种参数类型可以用在类.接口 ...
- Dynamic Web TWAIN——网页扫描SDK
下载地址:[https://www.dynamsoft.com/Support/DWTGuide/Dynamic%20Web%20TWAIN%20SDK.html] API:[http://devel ...
- VIM常用操作手册
VIM常用操作手册 1.多行操作,多行注释,多行取消注释 https://jingyan.baidu.com/article/9c69d48f43ed6d13c8024e7b.html 2.常用操作 ...
- 简单通讯聊天 群聊功能 Windows下的客户端 Linux下的epoll服务器
1 服务器代码 Linux eclipse C++ //======================================================================= ...
- CTF—攻防练习之HTTP—PUT上传漏洞
主机:192.168.32.152 靶机:192.168.32.159 中间件PUT漏洞 包括apache,tomcat,IIS等中间件设置支持的HTTP方法(get,post,head,delete ...
- 异常1(Exception)
父类 :Throwable(可抛出的) 有两个子类:Error(错误) Exception(异常) Error是所有错误类的父类,Exception是所有异常类的父类. 如图所示: 格式: ...
- 【转贴】Linux查看物理CPU个数、核数、逻辑CPU个数
https://www.cnblogs.com/sparkbj/p/7161675.html 记不住 sort uniq wc grep 等命令集合 # 总核数 = 物理CPU个数 X 每颗物理C ...
- SPOJ 703 SERVICE - Mobile Service 题解
题面 好题啊!~ 设f[i][j][k][l]表示已经处理完前i个请求后,a在j,b在k,c在l的最小值是多少: 那么f[i][p[i]][k][l]=min(f[i][p[i]][k][l],f[i ...
- 编辑器IDE之VSCode
很多时候面临换项目组,公司内部换等等,需要清除之前的权限,电脑更换等... 确实很烦人,所以记录也是给自己下次更加快速方便的使用 插件安装 个人常用的一些插件,发现好用的会更新 插件名 功能 vsco ...
- vue-router的query和params的区别
vue-router的query和params的区别 首先简单来说明一下$router和$route的区别 $router为VueRouter实例,想要导航到不同url,则使用$router.push ...