1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery全选 反选全不选效果

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>      		<script type="text/javascript">      			$(function(){      //				全选      				$('#qx').click(function(){      //					找到所有的复选框,加上checked属性,属性值为真true   选择表单元素的要用冒号 :checkbox      //				checked属性,值为true选中      				$('#ta :checkbox').prop('checked',true)	        				})      //				全不选      				$('#qbx').click(function(){      //				找到所有的复选框,加上checked属性,属性值为false   选择表单元素的要用冒号 :checkbox      //				checked属性,值为false不选中      //				(1)可以这样选      //				$('#ta :checkbox').prop('checked',false);      //				(2)可以这样选    removeProp是将class里面的值清空      				$('#ta :checkbox').removeProp('checked');      				})      //				反选(1)第一种方法      //				$('#fx').click(function(){      ////				获得现在处在选中状态下的元素      //				var ee = $('#ta :checked');      ////				全选      //				$('#ta :checkbox').prop('checked',true)	        ////				将刚才处在被选中状态的元素取消选中状态      //				ee.removeProp('checked');      //				})      //				反选(2)第二种方法      				$('#fx').click(function(){      //					每处理一个复选框就会执行一下这个function      //					i当前这个元素的序号,val指的是当前这个属性的属性值      				$('#ta :checkbox').prop('checked',function(i,val){      //					返回一个!val   相反的val 比如属性值是true  相反的就是false;      					return !val;      				})      				})      			})      		</script>      	</head>      	<body>      		<input type="button" name="" id="qbx" value="全不选按钮" />      		<input type="button" name="" id="qx" value="全选按钮" />      		<input type="button" name="" id="fx" value="反选按钮" />      		<table id="ta">      		<tr>      			<td><input type="checkbox" /></td>      			<td>电视剧01</td>      		</tr>      		<tr>      			<td><input type="checkbox" /></td>      			<td>电视剧02</td>      		</tr>      		<tr>      			<td><input type="checkbox" /></td>      			<td>电视剧03</td>      		</tr>      		<tr>      			<td><input type="checkbox" /></td>      			<td>电视剧04</td>      		</tr>      		<tr>      			<td><input type="checkbox" /></td>      			<td>电视剧05</td>      		</tr>      		</table>      	</body>      </html>

原文链接:https://www.qiquanji.com/post/7521.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: