jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行
全选-取消操作，注意$('#tb :checkbox').prop('checked',true); tb后面一定得有括号，否则会报错。
<!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="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
</script>
</body>
</html>
用DOM实现 全选-反选-取消操作：
<!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="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
//this 代指当前循环的每一个元素,this是DOM对象。
//console.log(this);
//用DOM实现的
if(this.checked){
this.checked=false;
}else{
this.checked=true;
}
})
}
</script>
</body>
</html>
效果：
2.用 jQuery实现 全选-反选-取消操作：
<!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="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
//传2个参数表示设置值，传1个参数表示获取值。
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>
3. 三元运算
var v=条件？真值：假值
<!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="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
var v=$(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
4. 笔记
实例：
全选，反选，取消
-选择器
-$('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked',true); 赋值
-jQuery方法内置循环： $('#tb :checkbox').xxxx
$('#tb :checkbox').each(function(k){
//k是当前索引
//this，DOM，当前循环的元素$(this)
})
-三元运算：var v=条件？真值：假值
