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>
    
  • 相关阅读:
    centos6.5 mysql配置整理
    第四章 Web表单
    第三章 模板
    第二章 程序的基本结构
    第一章 安装
    常见网络错误代码(转)
    微软消息队列MessageQueue(MQ)
    基于.NET平台常用的框架整理(转)
    Sqlserver更新数据表xml类型字段内容某个节点值的脚本
    正则表达式_基础知识集合
  • 原文地址:https://www.cnblogs.com/gxywb/p/9429453.html
Copyright © 2011-2022 走看看