jquery实现checkbox 全选/全不选的通用写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//name 是html表单专用于区别各组 chechbox 的属性， 不要用id(必须唯一)或者其它属性
function getValues() {
var aV = getCheckboxValues("a");
var bV = getCheckboxValues("b");
var cV = getCheckboxValues("c");
var result = "a组选中值: " + (aV=="" ? "未选中任何值" : aV) + "\n" +
"b组选中值: " + (bV == "" ? "未选中任何值" : bV) + "\n" +
"c组选中值: " + (cV == "" ? "未选中任何值" : cV);
alert(result);
}
function getCheckboxValues(name) {
return $(":checkbox[name="+name+"]:checked").map(function(){
return $(this).val();
}).get().join(",");
}
function chkAll(obj) {
var name = $(obj).attr("name");
//也许你觉得我写得太复杂， 但jquery 版本众多， 可以学点东西总是好的
//1. jquery 1.6 以上
//$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
//2. jquery 1.6 以下
//$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));
//3. 通用写法
$(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {
this.checked = obj.checked;
});
}
</script>
</head>
<body>
<div >
<span>第1组(a)：<input type="checkbox" name="aAll" onclick="chkAll(this)" />全选/全不选</span>
<input type="checkbox" name="a" value="a1" checked="checked" />a1
<input type="checkbox" name="a" value="a2" checked="checked" />a2
<input type="checkbox" name="a" value="a3" />a3
<input type="checkbox" name="a" value="a4" />a4<br />
<span>第2组(b)：<input type="checkbox" name="bAll" onclick="chkAll(this)" />全选/全不选</span>
<input type="checkbox" name="b" value="b1" />b1
<input type="checkbox" name="b" value="b2" checked="checked" />b2
<input type="checkbox" name="b" value="b3" checked="checked" />b3
<input type="checkbox" name="b" value="b4" />b4<br />
<span>第3组(c)：<input type="checkbox" name="cAll" onclick="chkAll(this)" />全选/全不选</span>
<input type="checkbox" name="c" value="c1" />c1
<input type="checkbox" name="c" value="c2" />c2
<input type="checkbox" name="c" value="c3" checked="checked" />c3
<input type="checkbox" name="c" value="c4" checked="checked" />c4<br />
<br />
<input type="button" value="查找每组的选中的值" onclick="getValues()" />
</div>
</body>
</html>
相关文章
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
这篇文章主要介绍了Jquery+AJAX实现无刷新上传并重命名文件操作,结合实例形式分析了jQuery+ajax前台上传文件与PHP后台接收处理相关操作技巧,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了使用jQuery实现input数值增量和减量的方法,实例分析了Bootstrap TouchSpin插件的用法,是非常实用的技巧,需要的朋友可以参考下2015-01-01
使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局，用法及示例如下，感兴趣的朋友不要错过2014-09-09
本文给大家分享的是jQuery制作文字轮播的特效，非常的实用，属于作者原创代码，分享给大家2017-02-02
这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能、定义及包裹匹配元素的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了jquery实现图片轮播和滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了jQuery中 $("a").click()无效问题分析,需要的朋友可以参考下2015-01-01
这篇文章主要介绍通过jQuery切换网页皮肤并将状态保存到Cookie的相关代码,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery后代选择器用法,以设置文本颜色的实例分析了后代选择器的应用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单，下面小编给大家分享下这方面的知识2016-08-08
最新评论