页内多个input全选不干扰且只用一段代码。
//html内容
<body>
<div id="d1">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d2">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d3">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d4">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
//
<script src="jquery-3.1.1.min.js"></script>//引入jquery
<script>
$('.in2').click(function () { //点击class为in2的input是触发
var div2=this.closest('div').children; //使用closest方法获取父节点，然后使用children获取所有子元素
if(div2[0].checked){ //判断第一个input的checked状态，如果为true，则其它都为true
for (var i = 0; i <div2.length; i++) {
div2[i].checked=true;
}
}
else{
for (var i = 0; i <div2.length; i++) {
div2[i].checked=false;
}
}
})
</script>
页内多个input全选不干扰且只用一段代码。的更多相关文章
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- input全选和取消全选
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- input全选与单选(把相应的value放入隐藏域去)
框架是Jquery 需求是: 页面上有很多复选框,1.当我选择一项复选框时候 把对应的值放入到隐藏域去 2.当我反选的时候 把隐藏域对应的值删掉.3.当我全选的时候 页面上所有的选择框的值一起放到隐藏 ...
- input 全选 jquery封装方法
HTML代码 <table class="table table-striped"> <thead> <tr> <th><in ...
- 页面的checkbox框的全选与反选
if (typeof jQuery == 'undefined') { alert("请先导入jQuery");} else { jQuery.extend({ ...
- jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr（checked）无效的解决
关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...
- input checkbod 全选 反选
<script> var CheckBox=div.getElementsByTagName('input'); ...
- JavaScript实现表单的全选,反选,获取值
构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方式
近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...
随机推荐
- 客户关系管理系统-CRM源码
QQ:2112326142 邮箱:jxsupport@qq.com 本公司开发的CRM源代码系统一份,附源代码,本公司产品唯一销售客服QQ号:2112326142 请联系此QQ号,以免给您的工作 ...
- Android Git 客户端
1.tortoisegit Git下载地址: https://tortoisegit.org/download/ SVN下载地址: https://tortoisesvn.net/downloads. ...
- Android开发案例 - 图库
本文不涉及UI方面的内容, 如果您是希望了解UI方面的访客, 请跳过此文. 本文将要详细介绍如何实现流畅加载本地图库. 像平时用得比较多应用, 如微信(见下图), 微博等应用, 都实现了图库功能, 其 ...
- 关于WCF报错之调用方未由服务器进行身份验证
在我们部署好WCF服务以后,调用WCF服务会出现”调用方未由服务器进行身份验证”的错误.这个错误是怎么造成的呢? 通常我们在创建WCF后,用本机调试,一切正常,没有任何问题.其实用本机测试的时候,服务 ...
- oracle触发器
类型 行级触发器: FOR EACH ROW 影响的每一行都会执行触发器 语句级出发器 默认的模式,一句话才执行一次触发器 触发器不能嵌套,不能含有事务控制语句 何时触发 Before:条件运行前 A ...
- Java并发基础框架AbstractQueuedSynchronizer初探(ReentrantLock的实现分析)
AbstractQueuedSynchronizer是实现Java并发类库的一个基础框架,Java中的各种锁(RenentrantLock, ReentrantReadWriteLock)以及同步工具 ...
- Oracle学习笔记四 SQL命令（二）：SQL操作语言类别
SQL分为下列语言类别 1.数据定义语言(DDL) Create.Alter.Drop 2.数据操纵语言(DML) Insert.Select.Delete.Update 3.事务控制语言(TCL) ...
- Nginx 访问日志轮询切割
Nginx 访问日志轮询切割脚本 #!/bin/sh Dateformat=`date +%Y%m%d` Basedir="/application/nginx" Nginxlog ...
- Linux下ps命令详解 Linux下ps命令的详细使用方法
http://www.jb51.net/LINUXjishu/56578.html Linux下的ps命令比较常用 Linux下ps命令详解Linux上进程有5种状态:1. 运行(正在运行或在运行队列 ...
- mysql数据库主从及主主复制配置演示
实验系统:CentOS 6.6_x86_64 实验前提:提前准备好编译环境,防火墙和selinux都关闭 实验说明:本实验共有2台主机,IP分配如拓扑 实验软件:mariadb-10.0.20 实验拓 ...