<!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. 构建LNMP+memcached服务

    通过PHP页面实现对memcached服务器的数据操作,实现以下目标: - 为PHP安装memcache扩展 - 创建PHP页面,并编写PHP代码,实现对memcached的数据操作 环境:部署LNM ...

  2. python pip安装模块报错 "Can't connect to HTTPS URL because the SSL module is not available."

    在升级python版本为3.6之后,pip安装模块报错. 报错信息如图: 原因是系统自带的openssl版本与python3的版本不匹配,所以这里只要升级openssl版本就可以解决问题. yum - ...

  3. mysql查询每个部门/班级前几名

    Employee 表包含所有员工信息,每个员工有其对应的 Id, salary 和 department Id . +----+-------+--------+--------------+ | I ...

  4. stream benchmark 交叉编译 on psoc

    之前有研究过这个,居然忘记了,看来确实是老了,没有盘过来. 如何下载,见 linux下载网页上的文件夹以及删除文件(stream) 出现了好几个问题 1. error while loading sh ...

  5. python字符串前面的u，还有r

    以u或U开头的字符串表示unicode字符串 如果你想要用非英语写文本,那么你需要有一个支持Unicode的编辑器.(了解一下unicode和ascll码还有utf-8) u'你好'        # ...

  6. 前端每日实战：43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教程 此视频 ...

  7. Redirecting to /bin/systemctl restart mysql. service Failed to restart mysql.service: Unit not found.

    使用如下命令操作mysql即可: systemctl restart mysqld.service systemctl start mysqld.service systemctl stop mysq ...

  8. [super class]和[self class]

    参考: https://www.jianshu.com/p/3f2bcc588b44?utm_campaign=hugo&utm_medium=reader_share&utm_con ...

  9. Python3解leetcode Average of Levels in Binary Tree

    问题描述: Given a non-empty binary tree, return the average value of the nodes on each level in the form ...

  10. php substr_replace()函数 语法

    php substr_replace()函数 语法 作用:替换字符串中某串为另一个字符串大理石平台价格 语法:substr_replace(string,replacement,start,lengt ...