<!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. P1273 有线电视网(树形dp)

    P1273 有线电视网 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. ...

  2. linux centOS 7 GUI安装

    centOS 7 GUI 图形用户界面(Graphical User Interface 克隆clone Windows中安装xshell和xftp传输软件 https://blog.csdn.net ...

  3. json对象和数组

    Json数据就是格式化的字符串.c#中如果做为参数调用,类型就是string.1.Json数组 方括号[{ "firstName":"John" , " ...

  4. IT人生的价值和意义 感觉真的有了

     为了做新闻APP,我居然短短一个月利用业余时间做了: 一个通用新闻采集器. 一个新闻后台审核网站. 一个通用采集器下载网站. 一个新闻微网站. 一个新闻APP, 而且还给新闻微网站和新闻 APP练就 ...

  5. （转载）IDEA新建项目时，没有Spring Initializr选项

    最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot. 看着博客来进行操作上手spring boot,很多都是说 创建一个新项目(Create New Project) 选 ...

  6. Hibernate中Query.list()方法报IllegalArgumentException异常

    最近在使用Hibernate开发项目,在写好hql语句,并初始化Query对象,执行Query.list()方法时,应用报IllegalArgumentException异常.经网上查询,现已经基本决 ...

  7. 命令行下 初识 redis 入门教程

    1. redis-cli 命令行进入redis set,get, setex,给键值设置过期时间 setex name 10 DOG //设置name键 为 DOG 10秒后过期. setnx,判断值 ...

  8. SQL SERVER学习1——数据库概念

    <SQL Server实例教程>(科学出版社) 数据库的基本概念 数据是载荷信息的物理符号,是数据库中存储的基本对象. 信息可以通过手势,眼神表达,但是表达信息的最佳方式还是数据. 数据有 ...

  9. jquery里正则的使用方法及常用的正则验证

    本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手. 假设我们的网页里有这样的一个表单: <input id="aijquery" type ...

  10. WCF 之部署（2010版本之上）

    首先,在WIN系统下打开IIS,每种操作系统是不同的,请不要弄混. 1.控制面板---左下放的程序---启用或关闭Windows功能,如图: 2.找到Internet Information Serv ...