<!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(进讨论组)