码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现全选,取消,反选

时间:2020-02-11 00:30:43      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:this   org   set   cli   check   else   www   meta   html4   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>复选多选反选</title>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
</div>
<table border="1">
<tr>
<td><input type="checkbox"> </td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>

</table>
<script>
function selectAll() {
$(‘table :checkbox‘).each(function () {
$(this).prop(‘checked‘,true);

})

}
function cancel(){
$(‘table :checkbox‘).each(function () {
$(this).prop(‘checked‘,false);

})
}
function reverse(){
$(‘table :checkbox‘).each(function () {
if($(this).prop(‘checked‘)){
$(this).prop(‘checked‘,false);

}else{
$(this).prop(‘checked‘,true);

}


})

}
</script>
</body>
</html>

技术图片

jquery实现全选,取消,反选

标签:this   org   set   cli   check   else   www   meta   html4   

原文地址:https://www.cnblogs.com/startl/p/12293420.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!