Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
</script>
<script>
$(document).ready(function () {
var xsChk = 'px';//定义的样式
var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
$(xsChkAll).each(function () {
var name = $(this).prop("name");
name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
$(this).on('click', function () {
$(name).prop("checked", $(this)[0].checked);
})
var xschk = $(this);
$(name).on('click', function () {
var IAll = $(name).length; //此子项目下所有checkbox的个数
var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
var isAllChecked = true; //是否是全选
if (IAll != IChk) {
isAllChecked = false;
}
$(xschk).prop("checked", isAllChecked);
});
});
}); </script> <legend>全选one</legend>
<input type="checkbox" class="xsChk" name="chk" />
全選 <input type="checkbox" name="chk" />
1<br />
<input type="checkbox" name="chk" />
2<br />
<input type="checkbox" name="chk" />
3<br />
<input type="checkbox" name="chk" />
4<br /> <legend>全选two</legend>
<input type="checkbox" class="xsChk" name="chk1" />
全選2 <input type="checkbox" name="chk1" />
11<br />
<input type="checkbox" name="chk1" />
22<br />
<input type="checkbox" name="chk1" />
33<br />
<input type="checkbox" name="chk1" />
44<br /> </body>
</html>
本文修改于博客园里一个案例，现在找不到这遍文章的地址，特此说明！
Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）的更多相关文章
- checkbox全选和取消功能
这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...
- 如何在repeater中找到checkbox并实现全选删除
checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat＝server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码 ...
- 使用js实现复选框的全选、取消功能
id为all的想设置全选的那个框的id,name为checkname[]的是每个小复选框: 第一种: <script> function checkAll() { var all=docu ...
- 全选、取消、2级 checkbox的选中切换
需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
- Jquery 利用单个复选款（checkbox）实现全选、反选
1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- JS实现全选与取消 Jquery判断checkbox是否被选中
1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...
随机推荐
- []APC001
题目质量都好高啊... A:求一个是$X$的倍数但不是$Y$的倍数的数,无解输出$-1$ 无解就是$Y|X$,否则输出$X$即可 B:给定$a_{1\cdots n},b_{1\cdots n}$,求 ...
- hdu 1565 最小割
黑白染色,源指向白,黑指向汇,容量都是方格中数的大小,相邻的格子白指向黑,容量为oo,然后求一次最小割. 这个割是一个简单割,如果只选择不在割中的点,那么一种割就和一个选数方案一一对应,割的大小就是不 ...
- 【ArcGIS笔记】数据处理
1.ARCGIS在导入Excel坐标点的时候出现"没有注册类"的情况怎么办? 确保你本机上装有office,并且版本要能够识别XLSX格式.2007以上. 2.导入excel时re ...
- 客户端获取ip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Centos 6/ 7下通过yum安装php7环境
本文转自:云溪社区 2015年12月初PHP7正式版发布,迎来自2004年以来最大的版本更新.PHP7最显著的变化就是性能的极大提升,已接近Facebook开发的PHP执行引擎HHVM.在WordPr ...
- HDU 4685 Prince and Princess （2013多校8 1010题 二分匹配+强连通）
Prince and Princess Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Othe ...
- Linear regulator=low-cost dc/dc converter
The circuit in Figure 1 is a good choice if you need a power supply with high efficiency and you don ...
- SQL SERVER 函数与SQL语法
http://www.cnblogs.com/hoojo/archive/2011/07/16/2108129.html
- python接口自动化25-发xml格式post请求
前言 post请求相对于get请求多一个body部分,body部分常见的数据类型有以下四种(注意是常见的,并不是只有4种) application/x-www-form-urlencoded appl ...
- 《Unity3D大风暴之入门篇(海量教学视频版)》
<Unity3D大风暴之入门篇(海量教学视频版)> 基本信息 作者: 智画互动开发团队 出版社:电子工业出版社 ISBN:9787121222429 上架时间:2014-1-13 出版日期 ...