三层结构复选框勾选控制

最新推荐文章于 2022-04-01 09:34:47 发布

Kathy218

最新推荐文章于 2022-04-01 09:34:47 发布

阅读量651

点赞数

分类专栏： jquery 文章标签：复选框勾选控制

本文链接：https://blog.csdn.net/yu00891/article/details/49099595

版权

demo引入jquery版本号为jquery-1.7.1.min.js

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        html,body,p,ul,li,h1,h2,h3,h4,img,dl,dt,dd,ol{
            padding: 0;
            margin: 0;
            border: none;
        }
        body{
            font-family: Helvetica, Tahoma, Arial,  "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
            font-size: 12px;
            color: #333333;
        }

        /*checkBox*/
        label {
            display: inline-block;
            vertical-align: middle;
        }
        h1{font-size: 18px;margin-bottom: 10px;}
        .checkBox{margin: 20px 0 0 50px;}
        .checkBox .all-top{margin-bottom: 5px;color: #58a200;font-weight: bold;}
        .checkBox dl{
            margin-bottom: 6px;
            border-bottom: 1px dotted #ccc;
            margin-left: 20px;
        }
        .checkBox dl dt{
            font-weight: bold;
            color:#D58C00;
        }
        .checkBox dl dd{
            line-height: 14px; padding: 4px 0 4px 16px;
        }
        .checkBox dd span{
            display: inline-block;
            *display: inline;
            width: 200px;
            zoom:1;
            font-weight: bold;
            margin-bottom: 6px;
        }
        .checkBox dd label{font-weight: normal;cursor: pointer;}
        .checkBox dd p label{margin-bottom:2px;}
        .checkBox input[type="checkbox"]{
            margin: -2px 4px 1px 0;
            vertical-align:middle; 
        }
    </style>
</head>
<body>
   <div id="Role_menu_c" >
        <form  action="" method="post" >
            <div class="checkBox">
                <h1>内容一</h1>
                <label class="all-top"><input type="checkbox">全选</label>
                <dl>
                    <dt>
                        <label><input type="checkbox" />标题1</label> 
                    </dt>
                    <dd>
                        <span>
                            <p>属性1</p>
                            <label><input type="checkbox" name="ckRead" />只读</label>
                            <label><input type="checkbox" name="ck" />维护</label>
                        </span>
                        <span>
                            <p>属性2</p>
                            <label><input type="checkbox" name="ckRead" />只读</label>
                            <label><input type="checkbox" name="ck" />维护</label>
                        </span>
                        <span>
                            <p>属性3</p>
                            <label><input type="checkbox" name="ckRead" />只读</label>
                            <label><input type="