JQuery復選框全選效果如何實現(xiàn)

更新時間：2020年05月08日 14:20:43 作者：朱李洛克

這篇文章主要介紹了JQuery復選框全選效果如何實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Js相關(guān)技術(shù)

checked屬性

如何獲取所有復選框：document.getElementsByName、

需求分析

在我們對表格處理的時,有些情況下,我們需要對表格進行批量處理

技術(shù)分析

第一種方法：選擇器[屬性名稱='屬性值']

$("input[type='checkbox']:gt(0)").prop("checked",this.checked);

第二種方法：使用層級選擇器來實現(xiàn) tbody > tr > td > input

$("tbody > tr > td > input").prop("checked",this.checked);

第三種方法：

// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]

代碼實現(xiàn)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		
		<script>
						
			/*
			 表格全選和全不選
			 進一步確定事件: 點擊事件
			 
			 */
			$(function(){
				//綁定點擊事件
				//this 代表的是當前函數(shù)的所有者
				$("#checkAll").click(function(){
					//獲取當前選中狀態(tài)
//					alert(this.checked);
					//獲取所有分類項的checkbox
					// 選擇器[屬性名稱='屬性值']
//					$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					
					//使用層級選擇器來實現(xiàn) tbody > tr > td > input
				//	$("tbody > tr > td > input").prop("checked",this.checked); //這個可行

				//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
					$("input").prop("checked",this.checked);
					
				});
			});
			
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" id="checkAll" />
					</td>
					<td>分類ID</td>
					<td>分類名稱</td>
					<td>分類商品</td>
					<td>分類描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
				<td>1</td>
				<td>手機數(shù)碼</td>
				<td>華為,小米,尼康</td>
				<td>黑馬數(shù)碼產(chǎn)品質(zhì)量最好</td>
				<td>
					<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充氣的</td>
				<td>這里面的充氣電動硅膠的</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>電腦辦公</td>
				<td>聯(lián)想,小米</td>
				<td>筆記本特賣</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>饞嘴零食</td>
				<td>辣條,麻花,黃瓜</td>
				<td>年貨</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床單,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: