day16-示例：多选反选取消
一、前言
之前我们一直用dom的写的多选、反选、取消，写了好几行代码，很复杂的，无疑增加了工作量。今天我们如果jquery写一个多选、反选、和取消的功能，看看如果用jquery难度有多大。
二、操作的html文档
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1" width="300px">
<thead>
<tr>
<th>选项</th>
<th>1.1.1.1</th>
<th>8080</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>8080</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script> //导入jquery
<script>
//js代码
</script>
</body>
三、全选、反选、取消
3.1、全选
说明：全部选中
function checkAll(){
$('input[type="checkbox"]').prop("checked",true);
}
3.2、取消
说明：全部取消
function cancleAll(){
$('input[type="checkbox"]').prop("checked",false);
}
3.3、反选
①jquery的方式
说明：$(this)代指的是jquery对象
function reverseAll(){
$('input[type="checkbox"]').each(function(k){
//jquery方式
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
②dom的方式
说明：这边this代指的是dom对象
function reverseAll(){
$('input[type="checkbox"]').each(function(k){
//dom的方式，k当前索引，this当前的标签
if(this.checked){
this.checked = false;
}else {
this.checked = true;
}
})
}
③三元运算方式
说明：三元运算方式，即：var v=条件? 真值：假值。
function reverseAll(){
$('input[type="checkbox"]').each(function(k){
//三元运算
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
根据上面的知识点我们需要一个总结：
- jquery的方法内部自动帮你循环了内部元素，不需要自己写for循环了。
- 如果需要循环的话，需要使 jquery对象.each(funcation(){}) 的方式循环，function中如果传入形参，代指的是索引。
- each循环中 this：代指的是dom对象的每一个元素，$(this) 代指的是jquery的循环的每一个对象
- dom对象：指的是标签本身，如:<input type="checkbox"/>，而jquery对象指的是一个数组，如：[input,context:input]
- $(this).prop("checked")中prop表示属性方法，如果：是$(this).prop("checked")表示获取值，是$(this).prop("checked"，true)是设置值。
