CheckBox 级联例子(转自JAVAEYE)

最新推荐文章于 2022-04-08 21:31:45 发布

转载最新推荐文章于 2022-04-08 21:31:45 发布 · 1.2k 阅读

文章标签：

#input #function #xhtml #javascript #html

web design 同时被 2 个专栏收录

33 篇文章

订阅专栏

Script

17 篇文章

订阅专栏

本文介绍了一种实现复选框层级间状态同步的方法，包括如何通过JavaScript代码判断和设置不同层级复选框的选中状态，确保父级被选中时所有子级也处于选中状态，反之亦然。

<!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=utf-8" /> <mce:script language="JavaScript"></mce:script> </HEAD> <BODY> <table> <tr> <td colspan="2"><input type="checkbox" name="chkAllBill" id="chkAllBill" parentId="0" onclick="checkedStatus(this.id);">ALL</td> </tr> <tr> <td colspan="2"><input type="checkbox" name="chkBill" id="chkBill1" parentId="chkAllBill" value="chkBill1" onclick="checkedStatus(this.id);">Root111</td> </tr> <tr> <td> </td> <td> <table> <tr> <td colspan='2'> <input type="checkbox" name="chkMat1" id="chkMat11" parentId="chkBill1" value="chkMat11" onclick="checkedStatus(this.id);">Product111 </td> </tr> <tr> <td> </td> <td> <table> <tr> <td> <input type="checkbox" id="chkMat11-1" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat111 </td> </tr> <tr> <td> <input type="checkbox" id="chkMat11-2" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat222 </td> </tr> <tr> <td> <input type="checkbox" id="chkMat11-3" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat333 </td> </tr> <tr> <td> <input type="checkbox" id="chkMat11-4" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat444 </td> </tr> </table> </td> </tr> <tr> <td><input type="checkbox" name="chkMat1" id="chkMat12" parentId="chkBill1" value="chkMat12" onclick="checkedStatus(this.id);">Product222</td> </tr> <tr> <td><input type="checkbox" name="chkMat1" id="chkMat13" parentId="chkBill1" value="chkMat13" onclick="checkedStatus(this.id);">Product333</td> </tr> </table> </td> </tr> <tr> <td colspan="2"><input type="checkbox" name="chkBill" id="chkBill2" parentId="chkAllBill" value="chkBill2" onclick="checkedStatus(this.id);">Root222</td> </tr> <tr> <td> </td> <td> <table> <tr> <td><input type="checkbox" name="chkMat2" id="chkMat21" parentId="chkBill2" value="chkMat21" onclick="checkedStatus(this.id);">Product111</td> </tr> <tr> <td><input type="checkbox" name="chkMat2" id="chkMat22" parentId="chkBill2" value="chkMat22" onclick="checkedStatus(this.id);">Product222</td> </tr> <tr> <td><input type="checkbox" name="chkMat2" id="chkMat23" parentId="chkBill2" value="chkMat23" onclick="checkedStatus(this.id);">Product333</td> </tr> </table> </td> </tr> <tr> <td colspan="2"><input type="checkbox" name="chkBill" id="chkBill3" parentId="chkAllBill" value="chkBill3" onclick="checkedStatus(this.id);">Root333</td> </tr> <tr> <td> </td> <td> <table> <tr> <td><input type="checkbox" name="chkMat3" id="chkMat31" parentId="chkBill3" value="chkMat31" onclick="checkedStatus(this.id);">Product111</td> </tr> <tr> <td><input type="checkbox" name="chkMat3" id="chkMat32" parentId="chkBill3" value="chkMat32" onclick="checkedStatus(this.id);">Product222</td> </tr> <tr> <td><input type="checkbox" name="chkMat3" id="chkMat33" parentId="chkBill3" value="chkMat33" onclick="checkedStatus(this.id);">Product333</td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <textarea name="txtare" id="txtare" cols="50" rows="5">