<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll()"/>

    <input type="button" value="反选" onclick="notCheck()"/>

    <input type="button" value="取消" onclick="notCheckAll()"/>

    <table border="1">

        <thead>

            <tr>

                <th>选项</th>

                <th>ip</th>

                <th>端口</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.1</td>

                <td>20012</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.1</td>

                <td>20012</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.1</td>

                <td>20012</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.1</td>

                <td>20012</td>

            </tr>

        </tbody>

    </table>

<script src="jquery.js"></script>

<script>

    function checkAll() {

        $('#tb :checkbox').prop('checked',true);

    }

    function notCheckAll(){

        $('#tb :checkbox').prop('checked',false);

    }

    function notCheck() {

        $('#tb :checkbox').each(function (k) {

//            this,指代的是当前循环的每个元素

//            使用dom方法

//            if(this.checked){

//                this.checked=false

//            }else{this.checked=true;}

//            使用jquery的第一种方式：

//            if($(this).prop('checked')){

//                $(this).prop('checked',false)

//            }else{$(this).prop('checked'),true;}

//            使用三元运算进一步精简版的jquery实现方式

            var v= $(this).prop('checked')?false:true;

            $(this).prop('checked',v);

        })

    }

</script>

</body>

</html>

　　

jquery实现全选，反选，取消的操作的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. jquery实现全选 反选 取消

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

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

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  6. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  7. jquery购物车全选，取消全选，计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

  8. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  9. jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）

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

  10. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

随机推荐

  1. eclipse 代码提示快捷键 alt+/

    eclipse (ALT+/)1.选择Eclipse菜单栏中的Window->preferences: 2.选择General->keys; 3.在右侧中间的窗体中点击word compl ...

  2. 02cython调用c++文件

    https://blog.csdn.net/ztf312/article/details/77340300 此时用python setup.py build_ext --inplace编译时报错如下: ...

  3. 05XML

    1.XML入门 1.1 引入 HTML, 超文本标记语言. html语言语法是很松散的! 1)标签不区分大小写的! 2)标签可以不匹配的. 由w3c组织,针对html的语法缺陷,去设计了另一门,叫xm ...

  4. [AHOI2008]紧急集合 / 聚会（LCA）

    [AHOI2008]紧急集合 / 聚会 题目描述 欢乐岛上有个非常好玩的游戏,叫做"紧急集合".在岛上分散有N个等待点,有N-1条道路连接着它们,每一条道路都连接某两个等待点,且通 ...

  5. 容器（collection）初步

    容器(集合)的分类: 泛型(generic):本质是数据类型的参数化(提前告诉编译器,在调用泛型时必须传入实际类型) 例:E即为在主函数中定义的传入的实际类型 class MyCollection&l ...

  6. R语言里面的循环变量

    for (i in 1:10) { print("Hello world") } 以上这条命令执行完之后,变量i会被保存下来!并且,i的值将是10. 程序中有多处循环的时候要非常注 ...

  7. Java缓冲字符读取

    public class BufferedReaderDemo { public static void main(String[] args) throws IOException { // 创建流 ...

  8. Flask学习笔记01之环境搭建

    使用pycharm搭建Flask运行环境 1. 打开pycharm ,创建一个新的工程 2. 选择创建Flask项目 3. Flask项目创建成功,结构如下 4. 运行项目 5. 发送请求 over!

  9. ht-4 hashmap特性

    一.hashmap底层原理: hashmap调用默认构造方法会产生一个默认底层是长度为16的Entry数组,首先调用key的hasCode()方法来得到一个整数, int hash = hash(ke ...

  10. 阿里云祝顺民（江鹤）：云原生SDWAN加速企业上云 引领未来智能网络

    第二届中国SD-WAN峰会于11月16日在北京盛大开幕,阿里云以黄金赞助商之名隆重参与.作为全球前三,亚太第一的云计算厂商,阿里云一直引领云网技术的演进及应用落地.过去一年,阿里云发布以云为中心的云原 ...