<!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. LINUX VSFTP配置及安装

    ------------------转载:亲身实践,确实好用(http://www.cnblogs.com/jack-Star/p/4089547.html) 1.VSFTP简介 VSFTP是一个基于 ...

  2. Centos 的防火墙（firewalld，iptables）

    Centos系统防火墙介绍 概述: 1.Filewalld(动态防火墙)作为redhat7系统中变更对于netfilter内核模块的管理工具: 2.iptables service 管理防火墙规则的模 ...

  3. windowserver 常用命令

    1.查看端口占用: netstat -ano | findstr "服务端口号"2.查看程序运行id: tasklist | findstr  nginx 3.杀死进程  tskk ...

  4. map接口、hashmap常用方法

    注意:map中键不能重复(是否重复是根据equals方法判断),否则新的会覆盖为旧的 范例: public class TestMap { public static void main(String ...

  5. ht-3 linkedList特性

    LinkedList内部封装的是双向链表数据结构,每个节点是一个Node对象. Node对象中封装的是要被添加的元素,还有一个指向上一个Node对象的引用和 指向下一个Node对象的引用 , 与Arr ...

  6. php strspn()函数 语法

    php strspn()函数 语法 作用:返回字符串中包含某些字符的数目.大理石平台厂家 语法:strspn(string,charlist,start,length) 参数: 参数 描述 strin ...

  7. 洛谷 P4300 BZOJ 1266 [AHOI2006]上学路线route

    题目描述 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:“很可能我们在 ...

  8. HTML基础入门学习准备篇

    在学习前端的开始,让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义 传统的前端:切图-标签和样式-实现效果 H5时代的前端: 一.需要各端的兼容开发 二.可以用于APP开发和移动站点的 ...

  9. 【HDOJ6646】A + B = C（模拟）

    题意 1<=a,b,c<=1e100000 思路: #include<bits/stdc++.h> using namespace std; typedef long long ...

  10. [CSP-S模拟测试]:Rectangle（模拟+树状数组）

    题目描述 平面上有$n$个点,第$i$个点的坐标为$X_i,Y_i$.对于其中的一个非空点集$S$,定义$f(S)$为一个最小矩形,满足:$\bullet$覆盖$S$中所有的点(在边界上也算覆盖):$ ...