页内多个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 ...
随机推荐
- JDBC数据库访问操作的动态监测 之 Log4JDBC
log4jdbc是一个JDBC驱动器,能够记录SQL日志和SQL执行时间等信息.log4jdbc使用SLF4J(Simple Logging Facade)作为日志系统. 特性: 1.支持JDBC3和 ...
- Android 自带后退按钮的使用
一.后退按钮有两种定义,分别是向上按钮和返回按钮:向上按钮:偏向于一种父子关系:返回按钮:反映的是一种前后关系 向上按钮:在清单文件中需要添加后退功能按钮的Activity中添加parentActiv ...
- iOS快速集成友盟社会化分享功能（v6.1.1）
1. U-Share SDK集成 1.1 下载U-Share SDK 通过iOS社会化组件选择所需的社交平台后进行下载,下载链接http://dev.umeng.com/social/ios/sdk ...
- Android设置图片内存溢出（OOM）问题——Android开发进阶之路6
ImageView设置图片必备常识技术: Android设备会给每个应用分配16M的内存空间,如果你设置的图片的比较大且同一个页面有多个时,经常会报OOM错误导致程序奔溃.所以在这种情况下我们必须要对 ...
- Extjs5 tree扩展----treepanel树组件
Ext.define('MyExtend.lib.TreeFilter', { filterByText: function(text) { this.f ...
- CSS3：radial-gradient，径向渐变的使用方法
语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...
- Hadoop技巧（02）：时间同步
阅读目录 序 时间同步 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 在实际部署 ...
- 远程管理无管理员权限的PC客户端
一.简介 为提高操作系统稳定性.流畅度,分公司同事PC用户没有administrator权限,导致同事不能对系统进行设置.不能自行安装软件.网管使用远程管理软件(如Teamviewer.QQ)为同事提 ...
- [转]Web APi之认证（Authentication）及授权（Authorization）【一】（十二）
本文转自:http://www.cnblogs.com/CreateMyself/p/4856133.html 前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请 ...
- Unity性能优化（4）-官方教程Optimizing graphics rendering in Unity games翻译
本文是Unity官方教程,性能优化系列的第四篇<Optimizing graphics rendering in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...