jQuery中的复选框全选

最新推荐文章于 2024-04-25 11:38:14 发布

Curry6

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量267

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/baidu_41634343/article/details/93976900

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery中的复选框全选

方法一

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		
		<table border="1">
			<thead>
				<tr>
					<th>
						<input type="checkbox" id="check_all" />
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" class="check_id" />
					</td>
					<td>
						<input type="checkbox" class="check_id" />
					</td>
					<td>
						<input type="checkbox" class="check_id" />
					</td>
					<td>
						<input type="checkbox" class="check_id" />
					</td>
					<td>
						<input type="checkbox" class="check_id" />
					</td>
				</tr>
			</tbody>
		</table>
		
		
		<script>
			$("#check_all").click(function(){
				$(".check_id").prop("checked",$(this).prop("checked"));
			})
		</script>
		
	</body>

方法二

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		
		<table border="1">
			<thead>
				<tr>
					<th>
						<input type="checkbox" onclick="check_alll()" name="check_all" />
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
				</tr>
			</tbody>
		</table>
		
		
		<script>
			function check_alll(){
				$("[name='check_id']").prop("checked",$("[name='check_all']").prop("checked"));
			}
		</script>
		
	</body>

方法三

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		
		<table border="1">
			<thead>
				<tr>
					<th>
						<input type="checkbox" onclick="check_alll()" name="check_all" />
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
					<td>
						<input type="checkbox" name="check_id" />
					</td>
				</tr>
			</tbody>
		</table>
		
		
		<script>
			function check_alll(){
				$("[name='check_id']").each(function(){
					$(this).prop("checked",!$(this).prop("checked"))
				})
			}
		</script>
		
	</body>

方法四

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<script type="text/javascript">
		function selectAll(ele){
			ele=$(ele);//从DOM对象转换成jQuery对象
			var friuts=$("input[name='friut']");
			for (var i = 0; i < friuts.length; i++) {
				friuts[i].checked=ele.checked;//要将ele的转换去掉才能正常执行
				
				friuts[i].checked=true;//只能全选但不能全部取消

				friuts[i].checked=ele[0].checked;
			}						//将DOM对象装成jQuery对象
		}
	</script>
	</head>
	<body>						<!--全选事件-->   <!--checked="checked"默认选中-->
		<input type="checkbox" onchange="selectAll(this);"/>全选<br />
		<input name="friut" type="checkbox" />哈密瓜<br />
		<input name="friut" type="checkbox" />橙子<br />
		<input name="friut" type="checkbox" />香蕉<br />
		<input name="friut" type="checkbox" />苹果<br />
		<input name="friut" type="checkbox" />西瓜<br />
	</body>

Curry6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的复选框全选

jQuery中的复选框全选方法一<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <body> <table border="1"> <thead> <tr> <th> &...
复制链接

扫一扫