日期:2014-05-16  浏览次数:20321 次

函数f1()怎么实现小类全部取消选择后,大类的复选框才取消选择?
HTML code

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">

<table width="479" height="53" border="1" cellspacing="0">
<%
for i=1 to 5
%>
  <tr>
    <td width="488"><%=i%>.<input type="checkbox" name="checkbox" value="checkbox"  onclick="f()"/>
      全选该类</td> <%' 这里是大类复选框,点击实现该类下所有小类全选。%>
  </tr>
  <tr>
    <td>
    <div>
    <ul>
    <%
    for j=1 to 3
    %>
    <li style="float:left; width:60px"><%=j%>.    <input type="checkbox" name="checkbox2" value="checkbox"  onclick="f1()"/></li>
    <%
    '函数f1()怎样实现全部取消该大类下所有小类选择后,大类的勾选才能去掉?
    next
    %>

    </ul>
    </div>
    </td>
  </tr>
 <%
  next
%>
  <tr>
    <td width="488" align="right">&nbsp;<input type="checkbox" name="checkbox" value="checkbox"  onclick="f2()"/>
      全选&nbsp;&nbsp; </td><%' 这里是总复选框,点击实现所有小类全选%>
  </tr>
</table></form>
</body>
</html>






------解决方案--------------------
JScript code
//调用时需要向f1函数传递this参数:
//<input type="checkbox" name="checkbox2" value="checkbox"  onclick="f1(this)"/>
function f1(obj) {
    var chks = obj.parentNode.parentNode.getElementsByTagName('input'); //当前大类下所有小类复选框集合
    var tr = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
    var tmp = tr.previousSibling;
    while (tmp.nodeType != 1) {
        tmp = tmp.previousSibling;
    }
    var c = tmp.getElementsByTagName('input')[0]; //大类复选框
    
    var counter = 0;
    for (var i = 0; i < chks.length; i ++) {
        if (chks[i].checked == false) counter ++;
    }
    if (counter == chks.length) c.checked = false;
}