checkBox的选择与取消jQuery部分有简写的方法吗？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="JIETCASE">
<meta name="description" content="JIETCASE">
<title>This is Test File</title>
<script type="text/JavaScript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#chk_true").click(function(){
$(this).attr("checked",true);
$("input[name='chk_false']").attr("checked",false);
$("input[name='atten']").attr("checked",true);
$("input[name='absence']").attr("checked",false);
$("input[name='late']").attr("checked",false);
$("input[name='early']").attr("checked",false);
});
$("#chk_false").click(function(){
$(this).attr("checked",true);
$("input[name='chk_true']").attr("checked",false);
$("input[name='atten']").attr("checked",false);
$("input[name='absence']").attr("checked",false);
$("input[name='late']").attr("checked",false);
$("input[name='early']").attr("checked",false);
});
$("input[name='absence']").click(function(){
$(this).attr("checked",true);
$("input[name='chk_false']").attr("checked",false);
$("input[name='chk_true']").attr("checked",false);
var num=0;
var chkTrue=$("input[name='atten']");
var chkLate=$("input[name='late']");
var chkEarly=$("input[name='early']");
$("input[name='absence']").each(function(){
if($(this).attr("checked")){
$(chkTrue[num]).attr("checked",false);
$(chkLate[num]).attr("checked",false);
$(chkEarly[num]).attr("checked",false);
}
num++;
});
});
$("input[name='atten']").click(function(){
$(this).attr("checked",true);
$("input[name='chk_false']").attr("checked",false);
$("input[name='chk_true']").attr("checked",false);
var num=0;
var chkTrue=$("input[name='absence']");
var chkLate=$("input[name='late']");
var chkEarly=$("input[name='early']");
$("input[name='atten']").each(function(){
if($(this).attr("checked")){
$(chkTrue[num]).attr("checked",false);
$(chkLate[num]).attr("checked",false);
$(chkEarly[num]).attr("checked",false);
}
num++;
});
});
$("input[name='late']").click(function(){
$(this).attr("checked",true);
$("input[name='chk_false']").attr("checked",false);
$("input[name='chk_true']").attr("checked",false);
var num=0;
var chkTrue=$("input[name='absence']");
var chkLate=$("input[name='atten']");
var chkEarly=$("input[name='early']");
$("input[name='late']").each(function(){
if($(this).attr("checked")){
$(chkTrue[num]).attr("checked",false);
$(chkLate[num]).attr("checked",false);
$(chkEarly[num]).attr("checked",false);
}
num++;
});
});
$("input[name='early']").click(function(){
$(this).attr("checked",true);
$("input[name='chk_false']").attr("checked",false);
$("input[name='chk_true']").attr("checked",false);
var num=0;
var chkTrue=$("input[name='absence']");
var chkLate=$("input[name='atten']");
var chkEarly=$("input[name='late']");
$("input[name='early']").each(function(){
if($(this).attr("checked")){
$(chkTrue[num]).attr("checked",false);
$(chkLate[num]).attr("checked",false);
$(chkEarly[num]).attr("checked",false);
}
num++;
});
});
});
</script>
</head>
<body>
<div>
</div>
<div id="center">
<ul id="jion_center">
<li id="jion_right">
<div style="margin-top:10px;">
<ul id="cont">
<li><input name="chk_true" id="chk_true" type="checkbox" /> <label>all true</label> <input name="chk_false" id="chk_false" class="borderNull" type="checkbox" /> <label>all false</label></li>
<li style="padding-bottom:10px;">
<table class="table" style="border-top:0;">
<tr>
<td style="width:40px;">01</td>
<td style="width:146px;">aa</td>
<td style="width:146px;">bb</td>
<td style="width:80px;">A103</td>
<td style="width:80px;">abcd</td>
<td style="width:40px;"><input name="atten" type="checkbox" /></td>
<td style="width:40px;"><input name="absence" type="checkbox" /></td>
<td style="width:40px;"><input name="late" type="checkbox" /></td>
<td style="width:40px;"><input name="early" type="checkbox" /></td>
</tr>
<tr>
<td style="width:40px;">02</td>
<td style="width:135px;">aa</td>
<td style="width:135px;">bb</td>
<td style="width:72px;">A103</td>
<td style="width:73px;">abcd</td>
<td style="width:40px;"><input name="atten" type="checkbox" /></td>
<td style="width:40px;"><input name="absence" type="checkbox" /></td>
<td style="width:40px;"><input name="late" type="checkbox" /></td>
<td style="width:40px;"><input name="early" type="checkbox" /></td>
</tr>
<tr>
<td style="width:40px;">03</td>
<td style="width:135px;">aa</td>
<td style="width:135px;">bb</td>
<td style="width:72px;">A103</td>
<td style="width:73px;">abcd</td>
<td style="width:40px;"><input name="atten" type="checkbox" /></td>
<td style="width:40px;"><input name="absence" type="checkbox" /></td>
<td style="width:40px;"><input name="late" type="checkbox" /></td>
<td style="width:40px;"><input name="early" type="checkbox" /></td>
</tr>
<tr>
<td style="width:40px;">04</td>
<td style="width:135px;">aa</td>
<td style="width:135px;">bb</td>
<td style="width:72px;">A103</td>
<td style="width:73px;">abcd</td>
<td style="width:40px;"><input name="atten" type="checkbox" /></td>
<td style="width:40px;"><input name="absence" type="checkbox" /></td>
<td style="width:40px;"><input name="late" type="checkbox" /></td>
<td style="width:40px;"><input name="early" type="checkbox" /></td>
</tr>
</table>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
[解决办法]
用单选框
[解决办法]
我写过一个类似关系的函数，一个“全选”和一组选项，“全选”点击时小组全部选中或反选，小组中任何单个点击时作逻辑判断，应该对你有用。函数外是示例，传入两个选择器。
- JScript code
var registerCheckBoxGroup = function (checkboxSwitch, checkboxList) { $(checkboxSwitch).live('click', function () { $(checkboxList).attr('checked', $(checkboxSwitch).attr('checked')); }); $(checkboxList).live('click', function () { if (!$(this).attr('checked')) { $(checkboxSwitch).attr('checked', false); } else { var flag = true; $(this).siblings(':checkbox').each(function () { if (!this.checked) { flag = false; return; } }); $(checkboxSwitch).attr('checked', flag); } });};registerCheckBoxGroup('#cbxWeeksAll', '#cbxWeeks :checkbox');