jQuery表格的选取全选反选（代码实例）
程序员文章站
2023-11-03 20:59:40
jquery表格的选取全选反选（代码实例）
<...
jquery表格的选取全选反选（代码实例）
<!doctype html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="uft-8"> <!-- 设置编码格式 -->
<title>title</title>
</head>
<body>
<input type="button" value="全选" onclick="choseall()"/>
<input type="button" value="反选" onclick="revserall()"/>
<input type="button" value="取消" onclick="cancleall()"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>ip</th>
<th>port</th>
</tr>
</thead>
<tbody id="td">
<tr>
<td><input type="checkbox" /></td>
<td>192.168.0.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>192.168.0.2</td>
<td>82</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>192.168.0.3</td>
<td>83</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script> <!-- 引入jq模块 -->
<script>
function choseall(){
console.log("choseall");
/*$("#td :checkbox") 选择标签*/
$("#td :checkbox").prop('checked',true);
}
function cancleall(){
$('#td :checkbox').prop('checked',false);
}
function revserall1(){
/*each() jq中的循环 在其中添加函数*/
/*prop() 函数一个参数表示获取这个属性的值 两个参数设置这个属性的值*/
$('#td :checkbox').each(function (){
console.log("revserall");
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
})
}
/*
document.getelementbyid('td'); --> <tbody id="td">...</tbody>
$('#td'); -->[tbody#td, context: document, selector: "#td"]
*/
/*$(this) 将dom对象转换成jq的对象*/
function revserall2(){
$('#td :checkbox').each(function (){
console.log("revserall");
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
function revserall(){
$('#td :checkbox').each(function (){
/*三目运算符 ：
条件？结果1：结果2
*/
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>