1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <table border="1">
  12. <thead>
  13. <tr>
  14. <th>选项</th>
  15. <th>ip</th>
  16. <th>port</th>
  17. </tr>
  18. </thead>
  19. <tbody id="i1">
  20. <tr >
  21. <td><input type="checkbox"></td>
  22. <td>1.1.1.1</td>
  23. <td>80</td>
  24. </tr>
  25. <tr>
  26. <td><input type="checkbox"></td>
  27. <td>1.1.1.1</td>
  28. <td>80</td>
  29. </tr>
  30. <tr>
  31. <td><input type="checkbox"></td>
  32. <td>1.1.1.1</td>
  33. <td>80</td>
  34. </tr>
  35. <tr>
  36. <td><input type="checkbox"></td>
  37. <td>1.1.1.1</td>
  38. <td>80</td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. <input type="button" value="all" onclick="checkAll()">
  43. <input type="button" value="rev" onclick="reverse()">
  44. <input type="button" value="can" onclick="checkNone()">
  45. </body>
  46. <script src="jquery-3.2.1.js">
  47. </script>
  48. <script>
  49. function checkAll () {
  50. $('#i1 input').prop('checked', true)
  51. // $(':checkbox').prop('checked', true)
  52. // 实际上, 这两条都是一样的.$带出的JQuery对象只能是列表, 且是标签列表.
  53. }
  54. function checkNone () {
  55. $('#i1 input').prop('checked',false)
  56. }
  57. // function reverse() {
  58. // $('#i1 input').each(function (k) {
  59. // console.log(k,this);
  60. // })
  61. function reverse() {
  62. $('#i1 input').each(function () {
  63. //三元运算, 实现反选, 选中的不选, 没选的选中
  64. var v = (this).prop('checked')?false:true;
  65. $(this).prop('checked',v)
  66. })
  67. }
  68. </script>
  69. </html>

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

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

  1. function reverse() {
  2. $('#i1 input').each(function (k) {
  3. console.log(k,this);
  4. })

输出的结果包含:

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. 基于XMPP的即时通信系统的建立 — XMPP IQ详解

    XMPP详解 XMPP(eXtensible Messaging and Presence Protocol,可扩展消息处理和现场协议)是一种在两个地点间传递小型结构化数据的协议.在此基础上,XMPP ...

  2. SDN定义网络

    http://edu.51cto.com/course/course_id-4466.html http://edu.51cto.com/course/course_id-4497.html

  3. Tensorflow入门----占位符、常量和Session

    安装好TensorFlow之后,开一个python环境,就可以开始运行和使用TensorFlow了. 先给一个实例, #先导入TensorFlow import tensorflow as tf he ...

  4. 【GIS新探索】算法实现在不规则区域内均匀分布点

    1 概要 在不规则区域内均匀分布点,这个需求初看可能不好理解.如果设想一下需求场景就比较简单了. 场景1:在某个地区范围内,例如A市区有100W人口,需要将这100W人口在地图上面相对均匀的标识出来. ...

  5. (转)CentOS 7 安装 Python3、pip3

    原文:https://ehlxr.me/2017/01/07/CentOS-7-%E5%AE%89%E8%A3%85-Python3%E3%80%81pip3/ CentOS 7 默认安装了 Pyth ...

  6. Asp.Net Cache缓存技术学习

    本文参考自Fish Li的细说 ASP.NET Cache 及其高级用法 一.前言,相信大多数做网站开发的都知道缓存技术对于网站的重要性,它对于网站的性能优化起着至关重要的作用. 关于缓存的技术大致有 ...

  7. java动态加载机制

    假设有一个class,ClassLoader首先把它load到内存里的code segment(内存里存放代码段的),站在ClassLoader的角度,内存里的一个一个的class就是一个一个的对象, ...

  8. python-poll实现异步IO

    #!usr/bin/python from socket import * from select import * from time import ctime s=socket() s.bind( ...

  9. python 多线程与GIL

    GIL 与 Python 线程的纠葛 GIL 是什么?它对 python 程序会产生怎样的影响?我们先来看一个问题.运行下面这段 python 代码,CPU 占用率是多少? # 请勿在工作中模仿,危险 ...

  10. java算法----------常用的加密算法

    散列算法(单向散列,不可逆) MD5(Message Digest Algorithm 5) SHA(Secure Hash Algorithm)   对称加密(加密解密使用同一密钥,速度快) DES ...