jquery实现全选，取消，反选的功能&实现左侧菜单

Posted 2020-10-11 bai_nian_min_guo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现全选，取消，反选的功能&实现左侧菜单相关的知识，希望对你有一定的参考价值。

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>

以上是关于jquery实现全选，取消，反选的功能&实现左侧菜单的主要内容，如果未能解决你的问题，请参考以下文章

使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能，

js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

JQuery实现的 checkbox 全选反选。

JQuery实现全选反选和取消功能

Layui table中筛选列增加 [全选，反选] 功能【转】

Vue实现单选、全选和反选