<!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>

解决方案 »

  1.   

    补充下问题:
    首先,最上面有两个checkBox分别是 全选与取消全部选择然后下面按照内容将会有四列checkBox,对应的有,上班,旷班,迟到,早退。
    其中一项被选择,则取消其他三项的选择。
    所以,写出了如此繁琐的程序
    我个人认为完全可以简化,但是却像不出如何才能把这部分简化起来写,所以请大伙来帮忙了
      

  2.   

    我写过一个类似关系的函数,一个“全选”和一组选项,“全选”点击时小组全部选中或反选,小组中任何单个点击时作逻辑判断,应该对你有用。函数外是示例,传入两个选择器。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');
      

  3.   


    非常感谢你的回复。。不过我这边已经解决完了。。用的与你的不同
    把代码贴出来分享一下吧,也许对他人有用{9}
    $("input[type='checkbox']").click(function(){
    if(this["name"]=="chk_true"){
    $("input:not([name='atten'])").attr("checked",false);
    $("input[name='atten']").attr("checked",true);
    }else if(this["name"]=="chk_false"){
    $("input:not([name='chk_false'])").attr("checked",false);
    }else{
    var n=0;
    var chk=$("input:not([name='"+this['name']+"'],[name='chk_true'],[name='chk_false'])");
    var obj1=$("input[name='"+$(chk[0]).attr("name")+"']");
    var obj2=$("input[name='"+$(chk[chk.length/3]).attr("name")+"']");
    var obj3=$("input[name='"+$(chk[chk.length/3*2]).attr("name")+"']");
    $("input[name='"+this['name']+"']").each(function(){
    if($(this).attr("checked")){
    $(obj1[n]).attr("checked",false);
    $(obj2[n]).attr("checked",false);
    $(obj3[n]).attr("checked",false);
    }
    n++;
    });
    }
    $(this).attr("checked",true);
    });