<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" value="全选" onclick="checkAll()">
<input type="button" value="取消" onclick="cancelAll()">
<input type="button" value="反选" onclick="reverseAll()">
<table border="1" >
<thead>
<tr>
<td>选择</td>
<td>IP</td>
<td>端口</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>192.168.1.1</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.1.1</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.1.1</td>
<td>8080</td>
</tr>
</tbody>
</table>
<!--引入jquery-->
<script src ='jquery-1.12.4.js'></script>
<script>
// 全选
function checkAll() {
$('#tb :checkbox').prop('checked',true);//将id是tb的下面的所有的checkbox的值设置为true,porp是列出所有元素
}
// 取消
function cancelAll() {
$('#tb :checkbox').prop('checked',false);//将id是tb的下面的所有的checkbox的值设置为false
}
// 反选
function reverseAll() {
$('#tb :checkbox').each(function () {
// this代指当前循环的每一个元素
// 反选
// console.log(this);
// console.log($(this)); //Dom来实现
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// } //jQuery来实现
// prop：
// prop('checked')查看是否被选定
// prop('checked',false)将值设置为false
// // if($(this).prop('checked')){
// $(this).prop('checked',false);
// }else {
// $(this).prop('checked',true);
// } // 三元运算来实现
// v = 条件？真值：假值
// var v = $(this).prop('checked')?false:true;
// $(this).prop('checked',v);设置值
// 也可以写成下面这种
$(this).prop('checked')?$(this).prop('checked',false):$(this).prop('checked',true); })
}
</script> </body>
</html>
知识点:
prop()方法设置或返回被选元素的属性和值
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
each（）方法规定为每个匹配元素规定运行的函数。用法each(function(){})
效果如下图: