JQ 全选和反选和取消
程序员文章站
2022-07-05 23:43:30
...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JQ 全选和反选和取消</title>
</head>
<body>
<table border="1" style="margin:20px auto;">
<tr><th>选择</th><th>姓名</th></tr>
<tr><td><input type="checkbox" /></td><td>吴者然</td></tr>
<tr><td><input type="checkbox" /></td><td>景临境</td></tr>
<tr><td><input type="checkbox" /></td><td>暴天明</td></tr>
<tr><td><input type="checkbox" /></td><td>落月清</td></tr>
<tr>
<td colspan="2">
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseAll()">
<input type="button" value="取消" onclick="cancleAll()">
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function checkAll(){
$(':checkbox').prop('checked',true);
}
function cancleAll() {
$(':checkbox').prop('checked',false);
}
function reverseAll(){
$(':checkbox').each(function(){
var v = $(this).prop('checked')? false:true;
$(this).prop('checked',v)
})
}
</script>
</body>
</html>
效果图：
上一篇： 多线程理解,线程
下一篇： JS 表单验证的15个正则表达式
推荐阅读
-
js解决checkbox全选和反选的问题
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
-
gridview checkbox从服务器端和客户端两个方面实现全选和反选
-
gridview checkbox从服务器端和客户端两个方面实现全选和反选
-
GridView中checkbox"全选/取消"完美兼容IE和Firefox
-
GridView中checkbox"全选/取消"完美兼容IE和Firefox
-
javascript checkbox全选和反选的简单实现
-
javascript checkbox全选和反选的简单实现
-
Vue教程全选和取消全选