首页 期权学习期权知识正文

jquery全选 反选全不选效果

xiaojiucai 期权知识 2020-08-18 411 0
<!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

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

微信扫码关注

更新实时通知

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论