<!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. leetcode-409-Longest Palindrome（统计字母出现次数）

    题目描述: Given a string which consists of lowercase or uppercase letters, find the length of the longes ...

  2. java中复制bean

    BeanUtils.copyProperties(p,d); p是等待被赋值的对象,d是源对象,将d中属性值赋值的p中对应的字段,d中有的属性p中必须有,p可以有更多属性

  3. SCOI2019 游记

    写在前面 其实冬令营之后就有一些想说的内容,由于心情原因没有写出来.PKUWC 失误频频,唯一可能还有点价值的就是 Day2T3 计算几何推了 76 分出来.NOIWC 更是无心再谈,感觉是被提答送走 ...

  4. 完美解决Bootstrap4 导航栏 fixed-top 后，锚点定位时遮挡问题

    利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...

  5. 微信内置的浏览器window.location.href 跳转不兼容问题

    1.不兼容苹果手机---->>>>使用模拟触发a标签 <a id="alink" href="http://www.baidu.com&qu ...

  6. Android字符串及字符串资源的格式化

    为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...

  7. Android开发不可或缺的十大网站及工具

    1. Google 做开发前完全是小白,真心不知道有Google这东西,只晓得百度,遇到问题直接百度,不是黑百度,百度在娱乐八卦方面确实靠谱,但是技术方面查出来的东西基本千篇一律,有些答案甚至还会起到 ...

  8. GitBook入门（用github做出第一本书）——超详细配图说明

    我最近接触到gitbook,发现它支持markdown和git,刚好把我之前在github上的笔记可以生成一本书,于是我就开始着手捣鼓gitbook,一下午的时间就弄的差不多了,说明这个东西还是挺容易 ...

  9. Mongo db 与mysql 语法比较

    mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...

  10. Android四大组件--服务（Service）

    1. startService和bindService的区别 1. startService: 生命周期: onCreate---onStartCommand---onDestory 与服务的通讯: ...