100分，非常复杂的checkbox选择

根据theforever大侠的提示，功能已经实现了。只是实现得比较麻烦，判断很多，通用性还不够好，有小bug。
这个是公司的页面模型
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript"> function chkThese(chkObj) { //多行多列选择
    $("[id*="+chkObj.id+"]:checkbox").attr("checked",chkObj.checked);
    var n = chkObj.id;
  var names = n.split('-');   //取消选择
  if(chkObj.checked!=true){
    $("[id="+names[0]+"]:Checkbox").removeAttr("checked");
    $("[id="+names[1]+"]:Checkbox").removeAttr("checked");
    $("[id="+names[1]+"-"+names[2]+"]:Checkbox").removeAttr("checked");
  }   //判断是否全选,如果全部选择，则全部checkbox都选择
  var isChk=true;
  var oL=document.getElementsByName(chkObj.name);
  if(oL!=null){
  if(oL.length>0){
  for(var i=0;i<oL.length;i++){
  if(oL[i].checked==false){
  isChk=false;
  break;
  }
  }
  }
  }
  if(isChk==true) {
  $("[id="+names[0]+"]:Checkbox").attr("checked",true);
    $("[id="+names[1]+"]:Checkbox").attr("checked",true);
    $("[id*=]:Checkbox").attr("checked",true);
  } //行选择
var arr = $("[id*="+names[0]+"]:Checkbox");
var fChk = true;
for(var i=1;i<arr.length;i++) {
if(arr[i].checked==false) {
fChk = false;
break;
}
}
if(fChk==true) {
arr = $("[id*="+names[0]+"]:Checkbox").attr("checked",true);
} //列选择
var arrs = $("[id*="+names[2]+"]:Checkbox");
var cChek = true;
for(var i=1;i<arrs.length;i++) {
if(arrs[i].checked==false) {
cChek = false;
break;
}
}
var cxsCheck = true;
if(cChek==true) {
$("[id*="+names[2]+"]:Checkbox").attr("checked",true);
} //多列选择
var cxs = $("[id*="+names[1]+"]:Checkbox");
for(var i=1;i<cxs.length;i++) {
if(cxs[i].checked==false) {
cxsCheck = false;
break;
}
}
if(cxsCheck==true) {
$("[id*="+names[1]+"]:Checkbox").attr("checked",true);
} //取消行选
var dys = $("[name*='dy']:Checkbox");
for(var i=0;i<dys.length;i++) {
$(dys[i]).bind("click", function(){
for(var j=0;j<dys.length;j++) {
if(dys[j].checked==false) {
$("[name='lc']:Checkbox").removeAttr("checked");
}
}
}
);
} //取消列选
var lcs = $("[name='lc']:Checkbox");
for(var i=0;i<lcs.length;i++) {
$(lcs[i]).bind("click",function() {
for(var j=0;j<lcs.length;j++) {
if(lcs[j].checked==false) {
$("[name*='dy']:Checkbox").removeAttr("checked");
}
}
});
}
}</script>
<style>
li {list-style:none;}
td {text-align:center;}
</style>
</head>
<body>
<center >
<table border="1" id="tab">
<tr>
    <td width="69" height="113" rowspan="2">楼层</td>
    <td height="55" colspan="4">
        <input type="checkbox" id="A-" name="dy" value="checkbox" onclick="chkThese(this)">A
    </td>
    <td colspan="4">
        <input type="checkbox" id="B-" name="dy" value="checkbox" onclick="chkThese(this)">B
    </td>
</tr>
<tr>
    <td height="28" colspan="2">
        <input type="checkbox" id="A-A1" name="dy-cx" value="checkbox" onclick="chkThese(this)">1
    </td>
    <td height="28" colspan="2">
        <input type="checkbox" id="A-A2" name="dy-cx" value="checkbox" onclick="chkThese(this)">2
    </td>
    <td colspan="2">
        <input type="checkbox" id="B-B1" name="dy-cx" value="checkbox" onclick="chkThese(this)">1
    </td>
    <td colspan="2">
        <input type="checkbox" id="B-B2" name="dy-cx" value="checkbox" onclick="chkThese(this)">2
    </td>
</tr>
<tr>
    <td height="107">
        <input type="checkbox" id="3F" name="lc" value="checkbox" onclick="chkThese(this)">3F
    </td>
    <td width="70">
        <div class='cell-layout'>
            <ul class="left-over"><li></li></ul>
        </div>
        <div class='detail'></div>
        <div class='detail'>
            <input type="checkbox" id="3F-A-A1" name="house" value="checkbox" onclick="chkThese(this)">3A-1
        </div>
    </td>
    <td width="75">
        <P>
        <div class='cell-layout'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
        </div>
       
    </td>
    <td width="53">
        <div class='cell-layout'>
            <ul class='left'><li></li></ul>
        </div>
        <div class='detail'></div>
        <div class='cell-layout'>
            <span class="detail"> <input type="checkbox" id="3F-A-A2" name="house" value="checkbox" onclick="chkThese(this)"> 3A-2</span>
        </div>
    </td>
    <td width="92">
        <P>
        <div class='cell-layout'>
            <ul class='right'>
            <li>122.00m2</li>
            <li>两房一厅</li>
            <li>园林/东南</li>
            <li>A套餐</li>
            </ul>
        </div>
    </td>
    <td width="53">
        <div class='cell-layout'>
            <ul class='left'><li></li></ul>
        </div>
        <div class='detail'></div>
        <div class='cell-layout'>
            <div class='cell-layout'>
                    <ul class='left'><li></li></ul>
            </div>
            <div class='detail'></div>
            <div class='cell-layout'>
                <span class="detail"> <input type="checkbox" id="3F-B-B1" name="house" value="checkbox" onclick="chkThese(this)"> 3B-1</span>
            </div>
        </div>
    </td>
    <td width="86">
 
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
    </td>
    <td width="59">
        <div class='cell-layout'>
            <div class='cell-layout'>
                <div class='detail'></div>
                <div class='cell-layout'>
                    <span class="detail"> <input type="checkbox" id="3F-B-B2" name="house" value="checkbox" onclick="chkThese(this)"> 3B-2</span>
                </div>
            </div>
        </div>
    </td>
    <td width="112">
        <P>
            <ul class='right'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
            </ul>
    </td>
</tr>
<tr>
    <td width="69" height="107">
            <input type="checkbox" id="2F" name="lc" value="checkbox" onclick="chkThese(this,'2F')">2F
    </td>
    <td width="70">
        <div class='cell-layout'>
                    <ul class="left-over"><li></li></ul>
        </div>
        <div class='detail'></div>
            <input type="checkbox" id="2F-A-A1" name="house" value="checkbox" onclick="chkThese(this)">2A-1
        </div>
    </td>
    <td width="75">
        <P>
            <ul class="left-over"><li></li></ul>
            <ul class='right'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
            </ul>
    </td>
    <td width="53">
        <div class='cell-layout'>
            <span class="detail"> <input type="checkbox" id="2F-A-A2" name="house" value="checkbox" onclick="chkThese(this)"> 2A-2</span>
        </div>
    </td>
    <td width="92">
        <P>
            <ul class='right'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
            </ul>
    </td>
    <td width="53">
        <div class='cell-layout'>
            <ul class='left'><li></li></ul>
        </div>
        <div class='cell-layout'> 
            <div class='cell-layout'>
                <span class="detail"> <input type="checkbox" id="2F-B-B1" name="house" value="checkbox" onclick="chkThese(this)"> 2B-1</span>
            </div>
        </div>
    </td>
    <td width="86">
        <P>
            <ul class='left'><li></li></ul>
            <ul class='right'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
            </ul>
    </td>
    <td width="59">
        <div class='cell-layout'>
            <ul class='left'><li></li></ul>
        </div>
        <div class='cell-layout'>
            <div class='cell-layout'>
                <div class='cell-layout'>
                    <span class="detail"> <input type="checkbox" id="2F-B-B2" name="house" value="checkbox" onclick="chkThese(this)"> 2B-2</span>
                </div>
            </div>
        </div>
    </td>
    <td width="112">
        <P>
            <ul class='left'><li></li></ul>
            <ul class='right'>
                <li>122.00m2</li>
                <li>两房一厅</li>
                <li>园林/东南</li>
                <li>A套餐</li>
            </ul>
    </td>
</tr>
</table>
</center>
</body>
</html>

解决方案 »

  1.   

    发现BUG
       先选中A  A下面的都被选中了
    这时候  取消任意一项  1或者2对应的都会被取消
      但是A不会
    A应该也要取消勾选
      

  2.   


    够细心。将A和B的checkbox里的ID改为"A" "B"就好了，去掉“-”。
    其实还有bug，但是确实想不出来怎么做了
      

  3.   


    选择一行2F或者3F（不能同时选）时，再选择1或2，2F的checkbox就取消选择了。理论上应该保留2F的checkbox选择
      

  4.   

    呵呵，很多问题，过后我自己都没印象，看起来似乎都是新的。
    楼主自己添加的JS，大概看了一下，如果用JQ的方法去写，可以简化不少的。
    楼主上面说还有BUG，最好把问题说得清楚些，我帮你再看看。因为我不喜欢没有针对性的去看代码。
      

  5.   


    我试了很多用JQ方法去写，对JQ很多一些方法还是不懂，只能用笨方法了。
    至于那个bug，
    选择一行2F或者3F（不能同时选）时，再选择1或2，2F的checkbox就取消选择了。理论上应该保留2F的checkbox选择
    这个是比较明显的，其他暂时没有发现。
    我觉得公司这个页面的设计就不太好，太难用了，一个页面做太多功能了
      

  6.   

    如果你能确保每一行的数据，只有需要选择的checkbox，而没有多余的其它checkbox，那用jquery倒是可以对同一个tr下面checkbox进行选定，而且代码也不多。但看你这种选择方式，似乎更倾向于用id号区做分类，即以ID号来标识每个checkbox的分类。这样就可以选择大层的checkbox时，可以根据ID号来遍历选中同子类的checkbox。
      

  7.   

    已收藏.
    提点建议:
    1,如果能有"部分选择"的提醒,则更好!
    2,如果给个提交钮,显示一下选择,则可以更好的验证.
    3,取掉charset=utf-8的那行(出现乱码,老是要调整)