时间:2021-05-26
复制代码 代码如下:
<!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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
废话不多说了,直接给大家贴代码了,具体代码如下所示:jQuery实现CheckBox全选、全不选$(function(){$(':checkbox').clic
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下:先来看看JavaScript实现checkbox复
jquery全选、全不选、反选效果的实现代码【推荐】首先:引入jqueryharan.info_jquery实例_全选全不选反选_select-all_unse
今天写页面遇到复选框动态全选或全不选问题,正常写法如下:$("#tb").find("input[type='checkbox']").attr("checke