100分，求助复杂js选择checkbox

这里有源码。我想实现的功能是 选择3F，那么整行就全部选择，如果我选择1，那么1这两列就选择，如果我选择A，那么A的4列就选择。只能100分<!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>
</head>
<body>
<center >
<table width="727" border="1">
<tr>
<td width="69" height="113" rowspan="2">
    <div align="center">楼层</div></td>
<td height="55" colspan="4">
  <div align="center">
    <input type="checkbox" name="checkbox6"
value="checkbox"> 
      A</div></td>
<td colspan="4">
  <div align="center">
    <input type="checkbox" name="checkbox5"
value="checkbox"> 
      B</div></td>
</tr>
<tr>
<td height="28" colspan="2">
  <div align="center">
    <input type="checkbox" name="checkbox"
value="checkbox"> 
      1</div></td>
<td height="28" colspan="2">
  <div align="center">
    <input type="checkbox" name="checkbox2"
value="checkbox"> 
      2</div></td>
<td colspan="2">
  <div align="center">
    <input type="checkbox" name="checkbox3"
value="checkbox"> 
      1</div></td>
<td colspan="2">
  <div align="center">
    <input type="checkbox" name="checkbox4"
value="checkbox"> 
      2</div></td>
</tr>
<tr>
<td height="107">
      <div align="center">
        <input type="checkbox" name="checkbox7"
value="checkbox"> 
      3F</div></td>
<td width="70">
<div class='cell-layout'>
  <div align="center">
  <ul class="left-over" >
    <li></li>
    </ul>
  </div>
</div><div class='detail'></div>
<div class='detail'>
  <div align="center">
    <input type="checkbox" name="checkbox9"
value="checkbox" ">   
  3A-1</div>
</div>   </td>
<td width="75">
<P>
<div class='cell-layout'>
      <div align="center">
      <ul class="left-over" >
            <li></li>
        </ul>
      <ul class='right'>
                <li>122.00m²</li>
                  <li>两房一厅</li>
                  <li>园林/东南</li>
                  <li>A套餐</li>
        </ul>
      </div>
</div>
<P>
  <div class='detail'>
            <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
<td width="53">
<div class='cell-layout'>
      <div align="center">
      <ul class='left'>
            <li></li>
        </ul>
      </div>
  </div>
<div class='detail'></div>
  <div class='cell-layout'>
    <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox92"
value="checkbox" >
  3A-1</span></div>
  </div>   </td>
<td width="92">
<P>
<div class='cell-layout'>
      <div align="center">
      <ul class='right'>
                <li>122.00m²</li>
                  <li>两房一厅</li>
                  <li>园林/东南</li>
                  <li>A套餐</li>
        </ul>
      </div>
</div>
<P>
  <div class='detail'>
            <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
<td width="53">
<div class='cell-layout'>
      <div align="center">
      <ul class='left'>
            <li></li>
        </ul>
      </div>
  </div>
<div class='detail'></div>
  <div class='cell-layout'>
    <div class='cell-layout'>
          <div align="center">
          <ul class='left'>
                <li></li>
            </ul>
          </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
      <div align="center"><span class="detail">
            <input type="checkbox" name="checkbox922"
value="checkbox">
    3A-1</span></div>
    </div>
  </div>   </td>
<td width="86">
<P>

      <div align="center">
      <ul class='right'>
                <li>122.00m²</li>
                  <li>两房一厅</li>
                  <li>园林/东南</li>
                  <li>A套餐</li>
        </ul>
      </div>

<P>
  <div class='detail'>
            <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
<td width="59">
<div class='cell-layout'>
      <div align="center">
      <ul class='left'>
            <li></li>
        </ul>
      </div>
  </div>
<div class='detail'></div>
  <div class='cell-layout'>
    <div class='cell-layout'>
          <div class='cell-layout'>
            <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
            </div>
          </div>
          <div class='detail'></div>
          <div class='cell-layout'>
            <div align="center"><span class="detail">
              <input type="checkbox" name="checkbox9222"
value="checkbox">
      3A-1</span></div>
          </div>
        </div>
  </div></td>
<td width="112">
<P>

    <div align="center">
      <ul class='right'>
            <li>122.00m²</li>
              <li>两房一厅</li>
              <li>园林/东南</li>
              <li>A套餐</li>
          </ul>
        </div>
<P>

        <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
  </td>
</tr>
<tr>
<td width="69" height="107">
          <div align="center">
        <input type="checkbox" name="checkbox8"
value="checkbox"> 
      2F</div></td>
<td width="70">
          <div class='cell-layout'>
            <div align="center">
                <ul class="left-over" >
                  <li></li>
                </ul>
            </div>
          </div>
          <div class='detail'></div>
            <div align="center">
        <input type="checkbox" name="checkbox9"
value="checkbox" >
      3A-1</div>
      </td>
<td width="75">
<P>
          <div align="center">
                <ul class="left-over" >
                  <li></li>
                </ul>
                <ul class='right'>
                  <li>122.00m²</li>
                    <li>两房一厅</li>
                    <li>园林/东南</li>
                    <li>A套餐</li>
                </ul>
          </div>
<P>
              <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
<td width="53">
          <div class='cell-layout'>
            <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
            </div>
          </div>
          <div class='detail'></div>
          <div class='cell-layout'>
            <div align="center"><span class="detail">
            <input type="checkbox" name="checkbox92"
value="checkbox">
      3A-1</span></div>
      </div></td>
<td width="92">
<P>
          <div align="center">
                <ul class='right'>
                  <li>122.00m²</li>
                    <li>两房一厅</li>
                    <li>园林/东南</li>
                    <li>A套餐</li>
                </ul>
          </div>
<P>
              <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
     </td>
<td width="53">
          <div class='cell-layout'>
            <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
            </div>
          </div>
          <div class='detail'></div>
          <div class='cell-layout'>
            <div class='cell-layout'>
              <div align="center">
                  <ul class='left'>
                    <li></li>
                  </ul>
              </div>
            </div>
            <div class='detail'></div>
            <div class='cell-layout'>
              <div align="center"><span class="detail">
              <input type="checkbox" name="checkbox922"
value="checkbox">
        3A-1</span></div>
            </div>
      </div></td>
<td width="86">
<P>
          <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
                <ul class='right'>
                  <li>122.00m²</li>
                    <li>两房一厅</li>
                    <li>园林/东南</li>
                    <li>A套餐</li>
                </ul>
          </div>
<P>
              <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
     </td>
<td width="59">
          <div class='cell-layout'>
            <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
            </div>
          </div>
          <div class='detail'></div>
          <div class='cell-layout'>
            <div class='cell-layout'>
              <div class='cell-layout'>
                <div align="center">
                    <ul class='left'>
                      <li></li>
                    </ul>
                </div>
              </div>
              <div class='detail'></div>
              <div class='cell-layout'>
                <div align="center"><span class="detail">
                <input type="checkbox" name="checkbox9222"
value="checkbox">
          3A-1</span></div>
              </div>
            </div>
      </div></td>
<td width="112">
<P>
          <div align="center">
                <ul class='left'>
                  <li></li>
                </ul>
                <ul class='right'>
                  <li>122.00m²</li>
                    <li>两房一厅</li>
                    <li>园林/东南</li>
                    <li>A套餐</li>
                </ul>
          </div>
<P>
              <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
</tr>
</table>
</center>
<p><input type="button" name="Submit" value="测试按钮"></p>
</body>
</html>

解决方案 »

  1.   

    <script type="text/javascript">
    function checkedRow(box) {
    var cols = box.parentNode.parentNode.parentNode.cells;
    for (var i = 0; i < cols.length; i++) {
    var cbx = cols[i].getElementsByTagName("input");
    if (cbx.length > 0) {
    cbx[0].checked = box.checked;
    }
    }
    } 

    function checkedCells(box, colIndex, rowIndex) {
    var rows = document.getElementById("tab").rows;
    for (var i = rowIndex; i < rows.length; i++) {
    var cols = rows[i].cells;
    var cbx = cols[colIndex].getElementsByTagName("input");
    if (cbx.length > 0) {
    cbx[0].checked = box.checked;
    }
    }
    } 

    function checkMulitCells(box, startRow, beginIndex, endIndex) {
    var rows = document.getElementById("tab").rows;
    for (var i = startRow; i < rows.length; i++) {
    var r = 0;
    var c = 0;   
    if (i < 2) {
    r = 2;
    if (endIndex > 4) c = 2, r = 4;
    } else {
    r = endIndex;
    c = beginIndex;
    }
    for (var j = c; j < r; j++) {
    var cbx = rows[i].cells[j].getElementsByTagName("input");
    if (cbx.length > 0) {
    cbx[0].checked = box.checked;
    }
    }
    }
    }
    </script>
      

  2.   

    <table width="727" border="1" id="tab">
    <tr>
    <td width="69" height="113" rowspan="2">
    <div align="center">
    楼层
    </div>
    </td>
    <td height="55" colspan="4">
    <div align="center">
    <input type="checkbox" name="checkbox6" value="checkbox" onclick="checkMulitCells(this, 1, 1, 4)">
    A
    </div>
    </td>
    <td colspan="4">
    <div align="center">
    <input type="checkbox" name="checkbox5" value="checkbox" onclick="checkMulitCells(this, 1, 5, 8)">
    B
    </div>
    </td>
    </tr>
    <tr>
    <td height="28" colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox" value="checkbox" onclick="checkedCells(this, 1, 2)">
    1
    </div>
    </td>
    <td height="28" colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox2" value="checkbox" onclick="checkedCells(this, 3, 2)">
    2
    </div>
    </td>
    <td colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox3" value="checkbox" onclick="checkedCells(this, 5, 2)">
    1
    </div>
    </td>
    <td colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox4" value="checkbox" onclick="checkedCells(this, 7, 2)">
    2
    </div>
    </td>
    </tr>
    <tr>
    <td height="107">
    <div align="center">
    <input type="checkbox" name="checkbox7" value="checkbox" onclick="checkedRow(this)">
    3F
    </div>
    </td>
    <td width="70">
    <div class='cell-layout'>
    <div align="center">
    <ul class="left-over">
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='detail'>
    <div align="center">
    <input type="checkbox" name="checkbox9" value="checkbox">
    3A-1
    </div>
    </div>
    </td>
    <td width="75">
    <P>
    <div class='cell-layout'>
    <div align="center">
    <ul class="left-over">
    <li></li>
    </ul>
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    </div>
    <P>
    <div class='detail'>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </div>
    </td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox92" value="checkbox" > 3A-1</span>
    </div>
    </div>
    </td>
    <td width="92">
    <P>
    <div class='cell-layout'>
    <div align="center">
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    </div>
    <P>
    <div class='detail'>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </div>
    </td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox922" value="checkbox"> 3A-1</span>
    </div>
    </div>
    </div>
    </td>
    <td width="86">
    <P>
    <div align="center">
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div> <P>
    <div class='detail'>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </div>
    </td>
    <td width="59">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox9222" value="checkbox"> 3A-1</span>
    </div>
    </div>
    </div>
    </div>
    </td>
    <td width="112">
    <P>
    <div align="center">
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    <P>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    </tr>
    <tr>
    <td width="69" height="107">
    <div align="center">
    <input type="checkbox" name="checkbox8" value="checkbox" onclick="checkedRow(this)">
    2F
    </div>
    </td>
    <td width="70">
    <div class='cell-layout'>
    <div align="center">
    <ul class="left-over">
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div align="center">
    <input type="checkbox" name="checkbox9" value="checkbox">
    3A-1
    </div>
    </td>
    <td width="75">
    <P>
    <div align="center">
    <ul class="left-over">
    <li></li>
    </ul>
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    <P>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox92" value="checkbox"> 3A-1</span>
    </div>
    </div>
    </td>
    <td width="92">
    <P>
    <div align="center">
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    <P>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox922" value="checkbox"> 3A-1</span>
    </div>
    </div>
    </div>
    </td>
    <td width="86">
    <P>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    <P>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    <td width="59">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center">
    <span class="detail"> <input type="checkbox"
    name="checkbox9222" value="checkbox"> 3A-1</span>
    </div>
    </div>
    </div>
    </div>
    </td>
    <td width="112">
    <P>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    <ul class='right'>
    <li>
    122.00m²
    </li>
    <li>
    两房一厅
    </li>
    <li>
    园林/东南
    </li>
    <li>
    A套餐
    </li>
    </ul>
    </div>
    <P>
    <div align="center">
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    </tr>
    </table>
      

  3.   

    IE、firefox都好使<!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">
    /**
     * 获取checkbox所在的td
     **/
    function getParentTd(el) {
    var td = el.parentNode;
    while(true) {
    if (td.tagName == "TD"){
    break;
    } else {
    td = td.parentNode;
    }
    }
    return td;
    }

    /**
     * 获取元素坐标
     **/
    function getLocation(el) {
    var loc = {locX: 0,locY: 0};
    loc.locX = el.offsetLeft;
    loc.locY = el.offsetTop;
    while(el = el.offsetParent) {
    loc.locX += el.offsetLeft;
    loc.locY += el.offsetTop;
    }
    return loc;
    }

    /**
     * 选中同列的checkbox
     **/
    function check(el, type) {
    var td = getParentTd(el);
    var tdLoc = getLocation(td);
    var table = document.getElementById("table");
    var tableLoc = getLocation(table);
    var chks = getAllCheckBoxs();
    var len = chks.length;
    for (var i = 0; i < len; i++) {
    var chkLoc = getLocation(chks[i]);
    if (type == "column") {
    if ((chkLoc.locX > tdLoc.locX && chkLoc.locX < tdLoc.locX + td.offsetWidth) && (chkLoc.locY > tdLoc.locY && chkLoc.locY < tableLoc.locY + table.offsetHeight)) {
    chks[i].checked = el.checked;
    }
    } else if (type == "row") {
    if ((chkLoc.locX > tdLoc.locX && chkLoc.locX < tableLoc.locX + table.offsetWidth) && (chkLoc.locY > tdLoc.locY && chkLoc.locY < tdLoc.locY + td.offsetHeight)) {
    chks[i].checked = el.checked;
    }
    }
    }
    }

    /**
     * 获取所有的checkbox
     **/
    function getAllCheckBoxs() {
    var inputs = document.getElementsByTagName("input");
    var chks = new Array();
    var len = inputs.length;
    for (var i = 0; i < len; i++) {
    if (inputs[i].type == "checkbox") {
    chks[chks.length] = inputs[i];
    }
    }
    return chks;
    }
    </script>
    </head>
    <body>
    <center >
    <table width="727" border="1" id="table">
    <tr>
    <td width="69" height="113" rowspan="2">
    <div align="center">楼层</div></td>
    <td height="55" colspan="4">
    <div align="center">
    <input type="checkbox" name="checkbox6"
    value="checkbox" onclick="check(this, 'column')">  
      A</div></td>
    <td colspan="4">
    <div align="center">
    <input type="checkbox" name="checkbox5"
    value="checkbox" onclick="check(this, 'column')">  
      B</div></td>
    </tr>
    <tr>
    <td height="28" colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox"
    value="checkbox" onclick="check(this, 'column')">  
      1</div></td>
    <td height="28" colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox2"
    value="checkbox" onclick="check(this, 'column')">  
      2</div></td>
    <td colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox3"
    value="checkbox" onclick="check(this, 'column')">  
      1</div></td>
    <td colspan="2">
    <div align="center">
    <input type="checkbox" name="checkbox4"
    value="checkbox" onclick="check(this, 'column')">  
      2</div></td>
    </tr>
    <tr>
    <td height="107">
    <div align="center">
      <input type="checkbox" name="checkbox7"
    value="checkbox" onclick="check(this, 'row')">  
      3F</div></td>
    <td width="70">
    <div class='cell-layout'>
    <div align="center">
    <ul class="left-over" >
    <li></li>
    </ul>
    </div>
    </div><div class='detail'></div>
    <div class='detail'>
    <div align="center">
    <input type="checkbox" name="checkbox9"
    value="checkbox" ">   
    3A-1</div>
    </div> </td>
    <td width="75">
    <P>
    <div class='cell-layout'>
    <div align="center">
    <ul class="left-over" >
    <li></li>
    </ul>
    <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
    </ul>
    </div>
    </div>
    <P>
    <div class='detail'>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center"><span class="detail">
    <input type="checkbox" name="checkbox92"
    value="checkbox" >
      3A-1</span></div>
    </div> </td>
    <td width="92">
    <P>
    <div class='cell-layout'>
    <div align="center">
    <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
    </ul>
    </div>
    </div>
    <P>
    <div class='detail'>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
    <td width="53">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
      <div align="center">
    <ul class='left'>
      <li></li>
      </ul>
      </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox922"
    value="checkbox">
      3A-1</span></div>
    </div>
    </div> </td>
    <td width="86">
    <P><div align="center">
    <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
    </ul>
    </div><P>
    <div class='detail'>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </div></td>
    <td width="59">
    <div class='cell-layout'>
    <div align="center">
    <ul class='left'>
    <li></li>
    </ul>
    </div>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <div class='cell-layout'>
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox9222"
    value="checkbox">
      3A-1</span></div>
      </div>
      </div>
    </div></td>
    <td width="112">
    <P><div align="center">
    <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
      </ul>
      </div>
    <P>  <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
    </td>
    </tr>
    <tr>
    <td width="69" height="107">
      <div align="center">
      <input type="checkbox" name="checkbox8"
    value="checkbox" onclick="check(this, 'row')">  
      2F</div></td>
    <td width="70">
      <div class='cell-layout'>
      <div align="center">
      <ul class="left-over" >
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div align="center">
      <input type="checkbox" name="checkbox9"
    value="checkbox" >
      3A-1</div>
      </td>
    <td width="75">
    <P>
      <div align="center">
      <ul class="left-over" >
      <li></li>
      </ul>
      <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
      </ul>
      </div>
    <P>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
    <td width="53">
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox92"
    value="checkbox">
      3A-1</span></div>
      </div></td>
    <td width="92">
    <P>
      <div align="center">
      <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
      </ul>
      </div>
    <P>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
    <td width="53">
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox922"
    value="checkbox">
      3A-1</span></div>
      </div>
      </div></td>
    <td width="86">
    <P>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
      </ul>
      </div>
    <P>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
    <td width="59">
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div class='cell-layout'>
      <div class='cell-layout'>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      </div>
      </div>
      <div class='detail'></div>
      <div class='cell-layout'>
      <div align="center"><span class="detail">
      <input type="checkbox" name="checkbox9222"
    value="checkbox">
      3A-1</span></div>
      </div>
      </div>
      </div></td>
    <td width="112">
    <P>
      <div align="center">
      <ul class='left'>
      <li></li>
      </ul>
      <ul class='right'>
      <li>122.00m2</li>
      <li>两房一厅</li>
      <li>园林/东南</li>
      <li>A套餐</li>
      </ul>
      </div>
    <P>
      <div align="center"><a href='#' onclick='roomInfo()'>查看</a></div>
      </td>
    </tr>
    </table>
    </center>
    <p><input type="button" name="Submit" value="测试按钮"></p>
    </body>
    </html>
      

  4.   

    getElementByTagName("INPUT")
    type=="checkbox"
      

  5.   

    好的JS方法是避免依赖于布局关系,而是按照逻辑关系来处理.
    另外,楼主HTML部分,有很多无用的DIV,它们的作用只是为了置中放置信息,可是这个完全可以通过TD的ALIGN属性实现.可以说是一种很大程度的资源浪费.
    我下面的方法,引用了一下JQ,然后只用一句JS就完事了.只要象下面代码中那样注意给下面每个CHECKBOX设置合适的名字,无论布局怎么变都没关系,都不用再改JS了.<!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=gb2312">
    <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,partOfId) {
    $("[id*="+partOfId+"]:Checkbox").attr("checked",chkObj.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" name="checkbox6" value="checkbox" onclick="chkThese(this,'A-')">A
    </td>
    <td colspan="4">
    <input type="checkbox" name="checkbox5" value="checkbox" onclick="chkThese(this,'B-')">B
    </td>
    </tr>
    <tr>
    <td height="28" colspan="2">
    <input type="checkbox" id="A-1" name="checkbox" value="checkbox" onclick="chkThese(this,'A-1')">1
    </td>
    <td height="28" colspan="2">
    <input type="checkbox" id="A-2" name="checkbox2" value="checkbox" onclick="chkThese(this,'A-2')">2
    </td>
    <td colspan="2">
    <input type="checkbox" id="B-1" name="checkbox3" value="checkbox" onclick="chkThese(this,'B-1')">1
    </td>
    <td colspan="2">
    <input type="checkbox" id="B-2" name="checkbox4" value="checkbox" onclick="chkThese(this,'B-2')">2
    </td>
    </tr>
    <tr>
    <td height="107">
    <input type="checkbox" name="checkbox7" value="checkbox" onclick="chkThese(this,'3F')">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="3FA-1" name="checkbox9" value="checkbox">3A-1
    </div>
    </td>
    <td width="75">
    <P>
    <div class='cell-layout'>
    <ul class="left-over"><li></li></ul>
    <ul class='right'>
    <li>122.00m2</li>
    <li>两房一厅</li>
    <li>园林/东南</li>
    <li>A套餐</li>
    </ul>
    </div>
    <P>
    <div class='detail'>
    <a href='#' onclick='roomInfo()'>查看</a>
    </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="3FA-2" name="checkbox92" value="checkbox" > 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>
    <P>
    <div class='detail'>
    <a href='#' onclick='roomInfo()'>查看</a>
    </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="3FB-1" name="checkbox922" value="checkbox"> 3B-1</span>
    </div>
    </div>
    </td>
    <td width="86">
    <P>
    <ul class='right'>
    <li>122.00m2</li>
    <li>两房一厅</li>
    <li>园林/东南</li>
    <li>A套餐</li>
    </ul>
    <P>
    <div class='detail'>
    <a href='#' onclick='roomInfo()'>查看</a>
    </div>
    </td>
    <td width="59">
    <div class='cell-layout'>
    <ul class='left'><li></li></ul>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <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="3FB-2" name="checkbox9222" value="checkbox"> 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>
    <P>
    <a href='#' onclick='roomInfo()'>查看</a>
    </td>
    </tr>
    <tr>
    <td width="69" height="107">
    <input type="checkbox" name="checkbox8" 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="2FA-1" name="checkbox9" value="checkbox">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>
    <P> <a href='#' onclick='roomInfo()'>查看</a>
    </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="2FA-2" name="checkbox92" value="checkbox"> 2A-2</span>
    </div>
    </td>
    <td width="92">
    <P>
    <ul class='right'>
    <li>122.00m2</li>
    <li>两房一厅</li>
    <li>园林/东南</li>
    <li>A套餐</li>
    </ul>
    <P> <a href='#' onclick='roomInfo()'>查看</a>
    </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="2FB-1" name="checkbox922" value="checkbox"> 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>
    <P> <a href='#' onclick='roomInfo()'>查看</a>
    </td>
    <td width="59">
    <div class='cell-layout'>
    <ul class='left'><li></li></ul>
    </div>
    <div class='detail'></div>
    <div class='cell-layout'>
    <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="2FB-2" name="checkbox9222" value="checkbox"> 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>
    <P> <a href='#' onclick='roomInfo()'>查看</a>
    </td>
    </tr>
    </table>
    </center>
    <p><input type="button" name="Submit" value="测试按钮"></p>
    </body>
    </html>
      

  6.   

    lz 你的html能不能先截取一部分能说明问题就ok...别一堆丢上来 想解决问题都看的累啊. 
      

  7.   


    谢谢你的提醒。我对HTML方面不熟。我的这个页面要动态生成的，不知道能不能通用？？就是JS不能写死，根据实际的数据进行
      

  8.   

    当然可以．否则还来给你支什么招呢，岂不成骗分的了．
    我说的＂只要象下面代码中那样注意给下面每个CHECKBOX设置合适的名字,无论布局怎么变都没关系,都不用再改JS了＂，这不仅是指不受布局影响，而且即使生态生成，只要按照我所写的那种规则给复选框命名就可以.你如果好好看看我的代码，就应该能想明白了．
    比如，生成A栋B栋的时候， 
    <input type="checkbox" name="checkbox5" value="checkbox" onclick="chkThese(this,'B-')">B
    这个不用怎么说了吧．
    下面的
    <input type="checkbox" id="3FB-2" name="checkbox9222" value
    意思就是3F-B-2，而这个关系，在你生成页面的时候，肯定提取数据时已经是按照这个关系提取的．
    所以，对于每一项来说，要生成这样的ID，是完全可行的．可能你是前台，我讲多也不一定能听懂，把这个给后台让他好好想想就行了．
      

  9.   

          推荐用JQ来完成，尽可能让DIV+CSS代码彻底脱离JS代码，一看起来更直关观些，二能全身心考虑JS的逻辑编码！当然如果设计到布局上的，JQ也可能表现出不兼容的问题，因此常给人认为JQ其实也不兼容！就像操作的特例里的select,checkbox等！