欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

 

效果图:
JQ 全选和反选和取消
            
    
    博客分类: 境-JS JQ全选反选取消 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • JQ 全选和反选和取消
            
    
    博客分类: 境-JS JQ全选反选取消 
  • 大小: 15 KB