zoukankan      html  css  js  c++  java
  • check单选框多个全选与取消全选

    <!DOCTYPE html>
    <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     </head>
     <body>
      <table class="table_lists"> 
      <tbody>
        <tr> 
         <td width="40"><input type="checkbox" value="A00" class="cbx_child" name="level" /></td> 
         <td width="100"><b>统计概览</b></td> 
         <td> </td> 
        </tr> 
        <tr> 
         <td width="40"><input type="checkbox" value="A01" class="cbx_child" name="level" /></td> 
         <td width="100"><b>文档管理</b></td> 
         <td> <span class="res_classify"><input type="checkbox" id="A0101" value="A0101" class="cbx_child_and" name="level" /><label for="A0101">添加文档</label></span> <span class="res_classify"><input type="checkbox" id="A0102" value="A0102" class="cbx_child_and" name="level" /><label for="A0102">修改任意文档</label></span> <span class="res_classify"><input type="checkbox" id="A0103" value="A0103" class="cbx_child_and" name="level" /><label for="A0103">审核文档</label></span> <span class="res_classify"><input type="checkbox" id="A0104" value="A0104" class="cbx_child_and" name="level" /><label for="A0104">移动文档</label></span> <span class="res_classify"><input type="checkbox" id="A0105" value="A0105" class="cbx_child_and" name="level" /><label for="A0105">复制文档</label></span> <span class="res_classify"><input type="checkbox" id="A0106" value="A0106" class="cbx_child_and" name="level" /><label for="A0106">删除文档</label></span> <span class="res_classify"><input type="checkbox" id="A0107" value="A0107" class="cbx_child_and" name="level" /><label for="A0107">清空文档</label></span> </td> 
        </tr> 
        <tr> 
         <td width="40"><input type="checkbox" value="A02" class="cbx_child" name="level" /></td> 
         <td width="100"><b>分类管理</b></td> 
         <td> <span class="res_classify"><input type="checkbox"  id="A0201" value="A0201" class="cbx_child_and" name="level" /><label for="A0201">添加分类</label></span> <span class="res_classify"><input type="checkbox" id="A0202" value="A0202" class="cbx_child_and" name="level" /><label for="A0202">修改分类</label></span> <span class="res_classify"><input type="checkbox" id="A0203" value="A0203" class="cbx_child_and" name="level" /><label for="A0203">删除分类</label></span> </td>
        </tr> 
       </tbody> 
      </table>
      <script src="jquery-1.8.3.min.js"></script>
     <script>
         $(function(){
            $('input.cbx_child').change(function(){
                 var cbx_child_and = $(this).parent().siblings().find('input');
                 $(this).prop('checked')?cbx_child_and.prop('checked',true):cbx_child_and.prop('checked',false);
             });
            $('input.cbx_child_and').change(function(){
                 if($(this).prop('checked')){
                    $(this).prop('checked',true).parents('td').siblings().children('.cbx_child').prop('checked',true);
                 }
                 else{
                        if($(this).parents('td').find("input:checked").length==0){
                         $(this).parents('td').siblings().children('.cbx_child').prop('checked',false);
                     }
                 }
             });
         });
     </script>
     </body>
    </html>
  • 相关阅读:
    [PHP]算法-归并排序的PHP实现
    [PHP] 数据结构-二叉树的创建PHP实现
    [PHP] 数据结构-循环链表的PHP实现
    [PHP] 数据结构-链表创建-插入-删除-查找的PHP实现
    [PHP] 算法-两个n位的二进制整数相加问题PHP实现
    [PHP] 数据结构-线性表的顺序存储结构PHP实现
    [日常] 链表-头结点和头指针的区别
    [日常] C语言中指针变量
    [日常] 算法-单链表的创建-尾插法
    [日常] 算法-单链表的创建
  • 原文地址:https://www.cnblogs.com/djdliu/p/5798508.html
Copyright © 2011-2022 走看看