<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>选项</th>

                <th>ip</th>

                <th>port</th>

            </tr>

        </thead>

        <tbody id="i1">

            <tr >

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

                    <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

                    <tr>

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

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

        </tbody>

    </table>

    <input type="button" value="all" onclick="checkAll()">

    <input type="button" value="rev" onclick="reverse()">

    <input type="button" value="can" onclick="checkNone()">

</body>

<script src="jquery-3.2.1.js">

</script>

<script>

    function checkAll () {

        $('#i1 input').prop('checked', true)

//        $(':checkbox').prop('checked', true)

//        实际上, 这两条都是一样的.$带出的JQuery对象只能是列表, 且是标签列表.

    }

    function checkNone () {

        $('#i1 input').prop('checked',false)

    }

//    function reverse() {

//        $('#i1 input').each(function (k) {

//            console.log(k,this);

//        })

    function reverse() {

    $('#i1 input').each(function () {

        //三元运算, 实现反选, 选中的不选, 没选的选中

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

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

    })

    }

</script>

</html>

在反选里面, 我们不需要用到for循环, 而用封装好的.each(function(k){})

.each里的函数的参数k, 实际上是下标(索引序号)

function reverse() {

        $('#i1 input').each(function (k) {

            console.log(k,this);

        })

输出的结果包含:

k  :  0 1 2 3

this: 所有inputs里面的每一个需要循环的input子标签, 而所有的this实际上都是DOM对象而不是JQ对象

如果要把this 转为JQ对象, 需要用$(this)包起来

三元运算:

var v = 条件? 真值:假值

学术或足球分析交流微信:chinamaths(进讨论组)

Don't hesitate to comment or add a like    -    Yours Bill
Bill's技术博客 足球分析博客 足彩数据视频
比尔极客日志_博客园 比尔足球数据_网易博客 足彩TV_优酷
比尔极客日志_CSDN 比尔足球数据_新浪博客 足彩TV_搜狐视频
比尔极客日志_51CTO 比尔足球数据_新浪微博 足彩TV_喜马拉雅
比尔极客日志_开源中国 比尔足球数据_官方URL 足彩TV_56视频
比尔极客日志_GitHub 比尔足球数据_头条号 微信号:zucai99

JQuery 更改属性 JQ对象循环 each 全选反选 三元运算的更多相关文章

  1. jquery checkbox选中状态以及实现全选反选

    jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...

  2. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  3. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  4. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  5. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  6. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  7. jQuery全选/反选checkbox

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

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

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

  9. jquery 书写全选反选功能

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

随机推荐

  1. 晦涩难懂的shell命令

    初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...

  2. 【SpringBoot+Mybatis+thymeleaf报错】Error resolving template "XXX", template might not exist or might not be accessible by any of the configured

    解决方法一: 原因:在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错. 在application.y ...

  3. 【数据库】：关于DB2数据库错误提示说明

    SQLSTATE 消息 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码类 代码 含义 要获得子代码, 参 ...

  4. C#常用字符串总结

    字符串基础<一> static void Main(string[] args) { string str1 = "I Love You"; string str2 = ...

  5. 20190417 CentOS 7下安装ActiveMQ

    前言 用VMware安装CentOS 7.6,创建一个新的用户lihailin9073,并使用这个用户登陆CentOS系统 安装和启动 登陆ActivieMQ官网http://activemq.apa ...

  6. Mac 10.12安装FTP工具FileZilla

    说明:在Windows估计用的比较多,在Linux基本不用了,CRT和Xshell基本可以完成上传. 下载: (链接: https://pan.baidu.com/s/1bpaxmeN 密码: uuw ...

  7. (转)深入剖析Redis主从复制

    一.主从概述 Redis 支持 Master-Slave(主从)模式,Redis Server 可以设置为另一个 Redis Server 的主机(从机),从机定期从主机拿数据.特殊的,一个从机同样可 ...

  8. Guava源码解析之EventBus

    最近看Elastic-Job源码,看到它里面实现的任务运行轨迹的持久化,使用的是Guava的AsyncEventBus,一个内存级别的异步事件总线服务,实现了简单的生产-消费者模式,从而在不影响任务执 ...

  9. solr实时更新mysql数据的方法

    第一步:创建core core是solr的特有概念,每个core是一个查询数据,.索引等的集合体,你可以把它想象成一个独立数据库,我们创建一个新core:名字[core1] 进入linux命令行,进入 ...

  10. Eclipse 安装spring插件spring tool suite(STS)

    安装方法有2种,一种是在线安装,比较方便,但耗时较长,一种是离线安装,步骤复杂一些,但耗时少,下面请看详细步骤. 方法一:在线安装     1:打开eclipse菜单Help>Eclise Ma ...