checkbox选中详解

时间：5年前阅读：6930

定义和用法

:checkbox 选择器选取带有 type=checkbox 的 input 元素。找到所有的复选框,加上checked属性,属性值为真true 选择表单元素的要用冒号 :checkbox checked属性,值为true选中。

步骤和方法下面代码注释写得很清楚了，慢慢看应该都能看得懂。

<!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>好看的电影，电视剧1</td>    
		</tr>    
		<tr>    
			<td><input type="checkbox" /></td>    
			<td>好看的电影，电视剧2</td>    
		</tr>    
		<tr>    
			<td><input type="checkbox" /></td>    
			<td>好看的电影，电视剧3</td>    
		</tr>    
		<tr>    
			<td><input type="checkbox" /></td>    
			<td>好看的电影，电视剧4</td>    
		</tr>    
		<tr>    
			<td><input type="checkbox" /></td>    
			<td>好看的电影，电视剧5</td>    
		</tr>    
		</table>    
	</body>    
</html>

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

微信扫码关注

更新实时通知

checkbox选中详解

网友评论