JQuery 更改属性 JQ对象循环 each 全选反选 三元运算
- <!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 全选反选 三元运算的更多相关文章
- jquery checkbox选中状态以及实现全选反选
jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- 基于XMPP的即时通信系统的建立 — XMPP IQ详解
XMPP详解 XMPP(eXtensible Messaging and Presence Protocol,可扩展消息处理和现场协议)是一种在两个地点间传递小型结构化数据的协议.在此基础上,XMPP ...
- SDN定义网络
http://edu.51cto.com/course/course_id-4466.html http://edu.51cto.com/course/course_id-4497.html
- Tensorflow入门----占位符、常量和Session
安装好TensorFlow之后,开一个python环境,就可以开始运行和使用TensorFlow了. 先给一个实例, #先导入TensorFlow import tensorflow as tf he ...
- 【GIS新探索】算法实现在不规则区域内均匀分布点
1 概要 在不规则区域内均匀分布点,这个需求初看可能不好理解.如果设想一下需求场景就比较简单了. 场景1:在某个地区范围内,例如A市区有100W人口,需要将这100W人口在地图上面相对均匀的标识出来. ...
- (转)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 ...
- Asp.Net Cache缓存技术学习
本文参考自Fish Li的细说 ASP.NET Cache 及其高级用法 一.前言,相信大多数做网站开发的都知道缓存技术对于网站的重要性,它对于网站的性能优化起着至关重要的作用. 关于缓存的技术大致有 ...
- java动态加载机制
假设有一个class,ClassLoader首先把它load到内存里的code segment(内存里存放代码段的),站在ClassLoader的角度,内存里的一个一个的class就是一个一个的对象, ...
- python-poll实现异步IO
#!usr/bin/python from socket import * from select import * from time import ctime s=socket() s.bind( ...
- python 多线程与GIL
GIL 与 Python 线程的纠葛 GIL 是什么?它对 python 程序会产生怎样的影响?我们先来看一个问题.运行下面这段 python 代码,CPU 占用率是多少? # 请勿在工作中模仿,危险 ...
- java算法----------常用的加密算法
散列算法(单向散列,不可逆) MD5(Message Digest Algorithm 5) SHA(Secure Hash Algorithm) 对称加密(加密解密使用同一密钥,速度快) DES ...