參考文章：http://flashdream8.iteye.com/blog/683774
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>jQuery控制點擊複選框後，展開更多內容丨www.update8.com</title>
- <script type="text/javascript" src="http://www.update8.com/p_w_picpaths/js/jquery.min.js"></script>
- <script type="text/javascript">
- //推送欄目多選框摺疊效果
- $(document).ready(function(){
- $(".ss").hide();
- var obj = document.getElementsByName('sendmobileto[]'); //獲取多選框數組
- var objobjLen= obj.length; //獲取數據長度
- var i;
- for (i = 0;i< objLen;i++){
- if (obj [i].checked==true) {
- $(".ss").show();
- break;
- }
- }
- });
- function chk(){
- var obj=document.getElementsByName('sendmobileto[]'); //選擇所有name="'sendmobileto[]'"的對象，返回數組
- //循環檢測它是不是被選中
- var objYN = false;
- var s = '';
- for(var i=0; i<obj.length; i++){
- if(obj[i].checked) {
- $(".ss").show();
- objYN = true;
- break;
- }
- if(!objYN ){
- $(".ss").hide();
- }
- }
- }
- </script>
- </head>
- <body class="body">
- <table border="0" width="100%">
- <tr>
- <td width="100%" class="th">
- <table>
- <tr>
- <td class="th">推送並增加額外選項:</td>
- <td class="th-left">
- <input name="sendmobileto[]" type="checkbox" value="310" onclick="chk()">欄目1
- <input name="sendmobileto[]" type="checkbox" value="311" onclick="chk()">欄目2
- <input name="sendmobileto[]" type="checkbox" value="312" onclick="chk()">欄目3
- <input name="sendmobileto[]" type="checkbox" value="313" onclick="chk()">欄目4
- <input name="sendmobileto[]" type="checkbox" value="314" onclick="chk()">欄目5
- <input name="sendmobileto[]" type="checkbox" value="315" onclick="chk()">欄目6
- </td>
- </tr>
- </table>
- <div class="ss">
- <table>
- <tr>
- <td class="th">性別:</td>
- <td class="lth">
- <input type="radio" type="radio" name="sex" value="男">男
- <input type="radio" name="sex" value="女">女
- </td>
- </tr>
- <tr>
- <td class="th">安全問題</td>
- <td class="lth">
- <select>
- <option>安全問題</option>
- </select>
- </td>
- </tr>
- <tr>
- <td class="th">回答答案</td>
- <td class="lth"><input type="text"></td>
- </tr>
- <tr>
- <td class="th">主頁</td>
- <td class="lth"><input type="text"></td>
- </tr>
- <tr>
- <td class="th">QQ</td>
- <td class="lth"><input type="text"></td>
- </tr>
- <tr>
- <td class="th">身份證號</td>
- <td class="lth"><input type="text"></td>
- </tr>
- </table>
- </div>
- </td>
- </tr>
- </table>
- </body>
- </html>