<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="../../../css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="../../../js/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="../../../js/bootstrap.min.js"></script> <script language="javascript"> $().ready(function() { $("input[id=all]").click(function(){ var allchecked = this.checked; var arr = $(this).parent().parent().parent().find("input"); for(var i = 1;i<arr.length;i++){ arr[i].checked = allchecked; } }); $("input[id=inlineCheckbox1]").click(function(){ var arr = $(this).parent().parent().parent().find("input"); for(var i = 1;i<arr.length;i++){ if(arr[i].checked){ arr[0].checked = true; return; } } var arr2 = $(this).parent().parent().parent().find("input[checked=true]"); if(arr2.length ==0){ arr[0].checked = false; } }) }); </script> </head> <body> <table class="table"> <tr> <th>一级菜单</th> <th>二级菜单</th> </tr> <tr> <td> <label class="checkbox-inline"> <input type="checkbox" id="all" value="option1"> 系统管理 </label> </td> <td> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> </td> </tr> <tr> <td> <label class="checkbox-inline"> <input type="checkbox" id="all" value="option1"> 系统管理 </label> </td> <td> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理 </label> </td> </tr> </table> </body> </html>
时间: 2024-10-09 21:46:17