<!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. 01scikit-learn数据集下载

    In [2]: from sklearn.datasets import load_iris iris = load_iris() iris.keys() Out[2]: dict_keys(['da ...

  2. Mac sublime 安装包的时候出现 unable to download xxx (_ssl.c:548)

    Mac sublime 安装包的时候出现 unable to download xxx前置条件:[本文行文中,所使用的电脑环境为 mac](当然不排除,在其他系统下,依然可以采用这种解决方案) 今天想 ...

  3. Linux安装mysql5.6.33

    1.下载mysql安装包: 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6.33,通用版,lin ...

  4. idhttp.get返回403错误解决办法

    在GET之前,先指定UserAgent参数IdHTTP1.Request.UserAgent := 'Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; Ma ...

  5. BZOJ 3879: SvT 虚树 + 后缀自动机

    Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...

  6. linux find rm ls 逻辑非运用

    需求场景描述 查找出除已知文件外的文件 办法: [root@VM_58_118_centos test]# .1_fv1..0_pv1..6_15752678845473..2_fv1..4_pv1. ...

  7. java 简单指令说明

    javac:Java编译器,Java程序的编译工具,用来将Java程序的源文件编译成字节码文件,也就是.class文件.java:Java解释器,解释和执行已经转换成字节码的Java应用程序.jdb: ...

  8. [CSP-S模拟测试]:Seat（概率DP+数学）

    题目描述 有$n+2$个座位等距地排成一排,从左到右编号为$0$至$n+1$.最开始时$0$号以及$n+1$号座位上已经坐了一个小$G$,接下来会有$n$个小$G$依次找一个空座位坐下.由于小$G$们 ...

  9. Fiddler正则匹配调试接口示例

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...

  10. Flask学习 4 http方法

    服务端端 #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: f ...