<!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. 网络请求及各类错误代码含义总结(包含AFN错误码大全)

    碰见一个很奇葩的问题, 某些手机在设置了不知什么后, 某些 APP 死活 HTTPS 请求失败, 例如以 UMeng 统计HTTP 请求失败为例, Log如下: UMLOG: (Error   App ...

  2. 【转载】基于Redis实现分布式锁

    背景在很多互联网产品应用中,有些场景需要加锁处理,比如:秒杀,全局递增ID,楼层生成等等.大部分的解决方案是基于DB实现的,Redis为单进程单线程模式,采用队列模式将并发访问变成串行访问,且多客户端 ...

  3. Haskell优雅的快排实现

    说得快速排序,基本是常用的排序当中速度最快的排序了,之前也用C和Java实现过,但是过程十分痛苦,更重要的是写完代码只记得过程却对实质的过程觉得隔了一层纱,有种说不出的感觉.刚刚看一下Haskell实 ...

  4. Python+USB+Vnet+FTP传输文件开发记录

    做一个Python+USB+Vnet+FTP传输文件开发记录

  5. STM32F103RE引脚功能整理

  6. 【Eclipse】编译使用Makefile的C工程

    创建MakeFile project新建src文件夹,将文件复制到里面.右击makefile,make targets->create->名称填上allmake targets->b ...

  7. 【文档】四、Mysql Binlog事件含义详解

    下面对binlog中事件做个简单说明: UNKNOWN_EVENT 这个事件类型应该永远不会出现.它从不会写入binlog中.如果binlog中的事件没法被识别成其他已知事件,他被当做UNKNOWN_ ...

  8. html转图片，java库cssbox

    引入依赖包 <dependency> <groupId>net.sf.cssbox</groupId> <artifactId>cssbox</a ...

  9. linux mint 18.2 install erlang

    由于Linux min 18.2仓库中的erlnag是18.2,我们手动安装最新版本,参考 https://www.erlang-solutions.com/resources/download.ht ...

  10. graphql pass arg

    ; ; var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.open("POST", "http ...