zoukankan      html  css  js  c++  java
  • 全选,反选,全不选

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				padding: 100px 150px;
    			}
    		</style>
    		<script src="../1.10.2.jquery.min.js"></script>
    	</head>
    	<body>
    		<input type="button" value="全选" id="quanxuan" />
    		<input type="button" value="反选" id="fanxuan" />
    		<input type="button" value="全不选" id="quanbuxuan" />
    		<br />
    		<br />
    		<br />
    		<ul id="articles">
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    			<li><input type="checkbox" />春夏秋冬</li>
    		</ul>
    		
    	</body>
    	<script>
    		//全选
    		$("#quanxuan").click(function(){
    			$("#articles :checkbox").attr('checked','checked');
    			$("#articles :checkbox").prop('checked',true);
    		})
    		//全不选
    		$("#quanbuxuan").click(function(){
    			$("#articles :checkbox").removeAttr('checked');
    			$("#articles :checkbox").removeProp('checked');
    		})
    //		反选
    		$("#fanxuan").click(function(){
    //			获得现在处在选中状态的元素
    			var obj=$("#articles :checked");
    //			全选
    			$("#articles :checkbox").attr('checked','checked');
    			$("#articles :checkbox").prop('checked',true);
    //			让刚才记录下来的元素取消选择
    			obj.removeAttr('checked');
    			obj.removeProp('checked');
    		})
    	</script>
    </html>
    
  • 相关阅读:
    单例类
    日期类2
    日历类
    日期转换类
    抓取网页内容并截图
    关于计时器与多线程
    让页面上图片不变形
    Thread 调用方法的方式
    语音放大缩小
    阻止Enter键回发到服务端Asp.net
  • 原文地址:https://www.cnblogs.com/gxywb/p/9429453.html
Copyright © 2011-2022 走看看