Home » jQuery 應用

[jQ]控制複選框的全選、全取消及反向選取

[ 日期： | 瀏覽：25,037 | 迴響：16 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 200 元)
沒錯!只要 200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

最近有幾位同學及網友都有問到怎樣針對複選框來做全選(Select All)等等的動作，所以筆者就稍微整理一下常見的幾種控制方式來說明。

手先用幾個簡單的複選框來當做範例：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<body>
	<table>
		<tbody>
			<tr>
				<td><input type="checkbox" id="selControl" /></td>
				<td class="item"></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="sel" value="jq36" /></td>
				<td class="item">jQuery 36 計</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="sel" value="jq72" /></td>
				<td class="item">jQuery 72 變</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="sel" value="minwt" /></td>
				<td class="item">梅問題の超質感商品攝影手法大公開</td>
			</tr>
		</tbody>
	</table>
</body>

此範例雖然不需要其它 CSS 的搭配，不過為了美觀還是加上一點點修飾：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

table {
	border: 1px solid black;
	border-collapse:collapse; 
	border-spacing:0;
}
td {
	width: 50px;
	height: 30px;
	text-align: center;
	border: 1px solid black;
}
td.item {
	width: 300px;
	text-align: left;
	padding-left: 10px;
}

第一個範例是要利用一個額外的複選框來控制其它的複選框：


所以當 #selControl 的狀態改變的同時，其它的複選框的狀態也要跟著變：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function(){
	// 當 #selControl 狀態改變時
	var $control = $('#selControl').change(function(){
		// 全部的複選框的 checked 屬性依 #selControl 的來決定
		$checkbox.attr('checked', !!$(this).attr('checked'));
	});
 
	var $checkbox = $(':checkbox[name=sel]').change(function(){
		// 判斷目前狀態為勾選的數量跟全部的複選框的數量是否一樣多
		var isSelAll = $checkbox.length == $checkbox.filter(':checked').length;
		// 依 isSelAll 來決定 #selControl 的勾選狀態
		$control.attr('checked', isSelAll);
	});
});

筆者也有針對其它的複選框及控制用的複選框之間的關聯加上判斷，所以就算勾選了全選後，若手動把其它的複選框取消勾選時，該全選的狀態也會被取消；反之亦然。

另一種情況是，並不是要用複選框來控制其它的複選框，可能是利用其它的元素，利如超連結等等。且除了全選及全不選之外，還有可能需要反向選取的效果。什麼是反向選取呢？其實就是把勾選的變成不勾選，不勾選的變成勾選的動作。

讓我們直接來看範例吧，首先是 HTML：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
	<a href="#" class="selAll">全部選取</a> | <a href="#" class="notSelAll">全部不選取</a> | <a href="#" class="invertSel">反向選取</a>
	<table>
		<tbody>
			<tr>
				<td><input type="checkbox" name="sel" value="jq36" /></td>
				<td class="item">jQuery 36 計</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="sel" value="jq72" /></td>
				<td class="item">jQuery 72 變</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="sel" value="minwt" /></td>
				<td class="item">梅問題の超質感商品攝影手法大公開</td>
			</tr>
		</tbody>
	</table>
</body>

主要是把控制複選框的部份改成用超連結，CSS 則不需要特別改變，接著就直接進入主要的 Script 部份：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(function(){
	// 先取得 name="sel" 的複選框
	var $checkbox = $(':checkbox[name=sel]');
 
	// 全部選取
	$('.selAll').click(function(){
		$checkbox.attr('checked', !!'checked');
 
		return false;
	});
 
	// 全部不選取
	$('.notSelAll').click(function(){
		$checkbox.attr('checked', !!'');
 
		return false;
	});
 
	// 反向選取
	$('.invertSel').click(function(){
		$checkbox.attr('checked', function(){
			return !$(this).attr('checked');
		});
 
		return false;
	});
});

這樣咱們就能多提供更多的功能選項供使用者來快速勾選囉！

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

16 筆針對 [jQ]控制複選框的全選、全取消及反向選取 的迴響

  1. 請問男丁大大，我碰到一個怪問題，我記得我沒有修改或是安裝過任何有關 wordpress feed 或是 rss 的東西，wordpress本身有內建，可是我的卻是壞掉的，我不知道該從哪邊開始檢測，也不知道該如何修復。附上我的連結煩請男丁老師幫忙指點。

    http://www.vampire.com.tw/service/feed

    因為最近要製作 iPhone 的 APP 需要用到這個東西才發現他壞掉，希望男丁老師可以幫幫忙！感謝、

  2. 再請教一下男丁大大！我應該要檢查哪一個檔案的標籤有沒有關閉呢？我找過好多檔案了＠＠

  3. 糗＠＠ 這個錯誤訊息我一整個有看沒有懂.. 輸出的script錯誤.. 我也不知道要去哪邊找.. 因為我也不知道哪時候開始出問題＠＠... 救命呀.. 有沒有大大可以幫幫我..

    • 可以的話就是提供個範例網頁或檔案讓大家幫你找找
      建議可以直接到討論區那邊發問, 比較好發表程式

  4. jquery-1.7.1.min.js上操作
    全部取消會有問題
    $checkbox.attr('checked', ");
    還是會全部選取,要改成
    $checkbox.attr('checked', false);

  7. 男丁老師:
    小弟有個小小問題，因為自己有寫一個小php系統，不是用drupal joomla wordpress等內容管理系統做的，想應用這個功能，做出類似cms表格動態管理，能進行表格全選一次批量刪除，以及個別刪除，目前有用php寫出新增刪除修改等功能，而這個系統的概念是先上傳一個txt文字檔，然後利用php檔案讀取的函式，將txt文字檔的內容讀取並用表格呈現，而這當中有套用到你在範例的另一個表格分頁jquery效果，新增及修改的部分目前都沒甚麼問題，在刪除的部分，假如我想要利用這個功能在表格最前方全部勾選，一次批量刪除，該怎麼修改呢，另外我也希望表格最上一排的title可以不論分第幾頁都可以固定，這兩個功能能否修改?源碼打包放在google硬碟上。
    https://docs.google.com/file/d/0B_fW0VHjboRtbW1BYUR3Z2ZxQmM/edit?pli=1

    • 批量刪除的話, 看你傳到後端程式時是要一次傳一筆還是一次傳多筆, 然後用某個符號來區隔
      至於要固定表頭, 可以試試一些現成的外掛, Google 查詢 "jquery grid"

  8. 男丁老師:

    新手小弟請教...

    小弟在 ASP.NET 裡面用 GridView 每筆資料加入 asp:CheckBox

    小弟用Button Sumit 後想檢查 GridView 內是否有勾選

    如何用 jQuery 檢查是否有 checked

    感恩...Orz

發表迴響