参考文章: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>