<!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 |
