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实现全选，取消，反选的功能&实现左侧菜单的更多相关文章

  1. （转载）jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  2. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  3. jQuery实现全选、反选和不选功能

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id=&q ...

  4. 利用JQuery实现全选和反选的几种方法

    前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...

  5. JQuery实现全选、反选和取消功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery实现全选，反选，取消的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery实现全选、反选、删除

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  9. Jquery，全选，反选，

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 网站微信登录－python 实现

    最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 微信现在提供两种登录接入方式 移动应用微信登录 网站应用微信登录 这里我 ...

  2. mongodb配置数据库文件夹，创建服务

    配置步骤 1.新建data文件夹,并在data下创建db及log文件夹 2.在mongodb安装目录下新增mongod.cfg文件,配置如下 systemLog:    destination: fi ...

  3. excel 应用，右下角的小十字拖拽的时候形成递减的数列

    excel 应用,右下角的小十字拖拽的时候形成递减的数列 2012-12-20 15:16无良小鬼 | 浏览 352 次 比如说我想要这样一列数字201220112010……这样递减的数列,而不是递增 ...

  4. 如何在IDEA启动多个Spring Boot工程实例

    在我讲解的案例中,经常一个工程启动多个实例,分别占用不同的端口,有很多读者百思不得其解,在博客上留言,给我发邮件,加我微信询问.所以有必要在博客上记录下,方便读者. step 1 在IDEA上点击Ap ...

  5. java面试Linux常用命令使用方法大全

    1.# 表示权限用户(如:root),$ 表示普通用户   开机提示:Login:输入用户名   password:输入口令   用户是系统注册用户成功登陆后,可以进入相应的用户环境.   退出当前s ...

  6. sourcegraph 方便的代码查看工具

    sourcegraph 是一个方便的代码查看插件,有chrome 的插件,具体安装可以在chrome 应用商店,同时 官方提供了基于docker 运行的方式(适合本地使用) 下载镜像 docker p ...

  7. npm查看全局安装过的包

    在使用node的时候,用npm安装了很多软件,过一段时间没有使用就会忘记,怎么查看自己全局安装过的包,用命令 npm list -g --depth 0 在百度里搜不到结果的,我在google里老外的 ...

  8. VMware ESXi 网卡

    esxcfg-vswitch -A "VMkernel09" vswitch0 esxcfg-vmknic -a "VMkernel09" -i 172.10. ...

  9. netty基本组件介绍

    Netty做为一款用于搭建高性能网络应用程序的高级框架,由以下几个主要构件组成: 一.Channel Channel 是java NIO的一个基本构造,可以把channel看作是传入或者传出的数据载体 ...

  10. 1711 Number Sequence（kmp）

    Number Sequence Time Limit : 10000/5000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) To ...