jquery 實現頁面全選反選功能
阿新 • • 發佈:2018-06-06
python<!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="cancleALL();" />
<input type="button" value="反選" onclick="reverAll();" />
<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>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2.2.2.2</td>
<td>2222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3.3.3.3</td>
<td>3333</td>
</tr>
<tr></tr>
</tbody>
</table>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全選" onclick="checkALL();" />
<input type="button" value="取消" onclick="cancleALL();" />
<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>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2.2.2.2</td>
<td>2222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3.3.3.3</td>
<td>3333</td>
<tr></tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkALL() {
$(‘#i1 :checkbox‘).prop(‘checked‘,true);
}
function cancleALL() {
$(‘#i1 :checkbox‘).prop(‘checked‘,false)
}
function reverAll() {
$(‘#i1 :checkbox‘).each(function (k) {
console.log(k)
if($(this).prop(‘checked‘)){
$(this).prop(‘checked‘,false);
}else {
$(this).prop(‘checked‘,true);
}
// if(this.checked) {
// this.checked = false;
// }else {
// this.checked = true;
// }
})
}
</script>
</body>
</html>
jquery 實現頁面全選反選功能