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) + "
" +
"b : " + (bV == "" ? " " : bV) + "
" +
"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>