1、全选,取消,反选的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选以及取消测试</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>
                    选择按钮
                </th>
                <th>
                    内容
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    123
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    456
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    789
                </td>
            </tr>
        </tbody>
    </table>
    <input type="radio" name='cc' onclick="select_all()">:全选
    <input type="radio" name='cc' onclick="clear_all()">:取消
    <input type="radio" name='cc' onclick="reverse_all()">:反选

    <script src="jquery-3.2.1.js"></script>
    <script>
        function select_all() {
            $("table input[type='checkbox']").prop('checked',true)
        }
        function clear_all() {
            $("table input[type='checkbox']").prop('checked',false)
        }

        function reverse_all() {
//            var list = $("table input[type='checkbox']")
            $("table input[type='checkbox']").each(function () {
                var ischecked = $(this).prop('checked')
                if(ischecked){
                    $(this).prop('checked',false)
                }else {
                    $(this).prop("checked",true)
                }
            })

        }



    </script>
</body>
</html>

  

2、左侧菜单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单例子</title>
    <style>
        .aa{
            background-color: greenyellow;
            width: 30%;
            height: 500px;
            border-color: orange;
            /*border-width: 4px;*/
            border-style: solid;
            float: left;
        }
        .bb{
            background-color: aqua;
            width: 69%;
            height: 500px;
            border-style:dashed;
            /*border-width: 6px;*/
            border-color: orange;
            float: right;

        }
        .cc{
            font-size: 40px;

        }
        .dd{
            border-color: red;
            border-style: solid;
            background-color:black;
            color: white;
        }
        .ee{
            display: none;
        }
    </style>
</head>
<body>
    <div class="aa">
        <div>
            <strong class="cc" onclick="func(this)">菜单1</strong>
            <div class="dd ee">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
        <div>
            <strong class="cc" onclick="func(this)">菜单2</strong>
            <div class="dd ee">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>
        <div>
            <strong class="cc" onclick="func(this)">菜单3</strong>
            <div class="dd ee">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
                <div>内容4</div>
            </div>
        </div>


    </div>
    <div class="bb">内容</div>


    <script src="jquery-3.2.1.js"></script>
    <script>
        function func(ths) {
            $(ths).next("div").removeClass("ee")
            $(ths).parent().siblings("div").children("div").addClass("ee")


        }
    </script>

</body>
</html>

  

posted on 2017-10-23 23:33  bainianminguo  阅读(235)  评论(0编辑  收藏  举报