<!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. AssertJ断言系列-----------<数据库断言二>

    那么,在实际的接口测试中,我们除了要断言响应的数据正确之外,可能有的还需要断言数据层是否数据真的有入库. assertj db是可以直接对数据库进行断言和操作的. 一.创建一个students表 CR ...

  2. gettimeofday

    作用: 需要打印代码执行到某处的时间,或者需要计算程序执行的时间差(精确到微妙级).这时会用到gettimeofday函数,它可以返回自1970-01-01 00:00:00到现在经历的秒数. 原型: ...

  3. OpenFoam+CFDEM+Liggghts安装耦合

    这里安装的时间节点为:2018.10.29,安装的是目前的最新版本CFDEM,支持到与OpenFoam-5.x的耦合. 1. 先安装openfoam:https://openfoam.org/down ...

  4. RestTemplate--解决中文乱码

    [原文链接]:https://www.tecchen.xyz/rest-template-messycode.html 我的个人博客:https://www.tecchen.xyz 在开发扇贝-每日一 ...

  5. C# 聊一聊屏保的设置

    初步认识屏保 进入屏保设置 强行开头,大家都知道我们只需要在搜索框打入“屏保”,就能进入屏保的设置选项.然而箭头指向的位置到底是在Windows的哪个地方呢?这就是写这篇博客的原因. 进入一个屏幕保护 ...

  6. 03-树3 Tree Traversals Again （25 分)

    An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example ...

  7. 关于Matlab串口发送HEX格式字符

    终于想起来更新一下关于使用Matlab串口发送HEX格式字符.这个用法主要来自于我使用Matlab对机器人进行实时轨迹跟踪的绘制,由于底层限制,自己又不想在中间增加转换模块,就需要直接发送HEX格式指 ...

  8. io流之节点流inputstream、outputstream、reader、writer

    例子程序:读取工作空间下 package io; import java.io.*; public class TestFileInputStream { public static void mai ...

  9. Javascript显示和隐式类型转换

    1.转换成字符串 多数的JavaScript宿主环境(比如Node.js和Chrome)都提供了全局函数toString: 与此同时Object.prototype也定义了toString方法,使得所 ...

  10. Eclipse/MyEclipse如何快速提取变量（最强帮手）

    不多说,直接上干货! Eclipse里如何快速提取变量? 按alt+shift+l MyEclipse里如何快速提取变量? 按alt+shift+l 成功!快速提取变量 扩展学习 Eclipse/My ...