使用jquery對複選框進行全選/反選

阿新 • • 發佈：2019-01-15

首先看一下結構

<span style="color:#3333ff;">  <body>
    <div>
    	<form action="" method="post">
    		<table>
    		
    			<tr><td>全選/全不選<input type="checkbox" class="select" /></td><td>姓名</td></tr>
    			<tr><td>選項 1：           <input type="checkbox"/></td><td>張3</td></tr>
    			<tr><td>選項 2：            <input type="checkbox"/></td><td>張4</td></tr>
    			<tr><td>選項 3：            <input type="checkbox"/></td><td>張5</td></tr>
    			<tr><td>選項 4：            <input type="checkbox"/></td><td>張6</td></tr>
    			<tr><td>選項 5：            <input type="checkbox"/></td><td>張7</td></tr>
    		
    		</table>
    </form>
    </div>
  </body></span>

然後是js程式碼(記得引用jq檔案)

<span style="color:#3333ff;"><script type="text/javascript">
		$(function(){
			// 全選/全不選事件
			$(".select").click(function(){
				$("input:checkbox").attr("checked",this.checked);
			
			});
			
			//宣告個標識變數 隨便給個預設值
			var c = true;
			
			//如果點下面對應的複選框時 根據情況判斷是否勾選第一個
			//(假如第一次選擇了全選，然後又把下面複選框裡對勾取消了，那麼全選複選框中的對勾也應該取消

<span style="white-space:pre">			</span>//下圖選項2沒有被勾選，所以全選也沒有被勾選


			$("input:checkbox:gt(0)").click(function(){
				//迴圈遍歷選項看看是否都勾選了
				$("input:checkbox:gt(0)").each(function(i){
					//如果有 沒有勾選的選項就把標識變數賦成false然後跳出迴圈
					if(this.checked==false){
						c = false;
						return false;
					}else{
						c=true;
					}
				
				});	
				//選項中如果有一個沒勾選 ，全選複選框的對勾就會取消，反之選項中全部勾選，全選複選框也會被選中
				$(".select").attr("checked",c);
			});
			
		});
</script></span>

最後放張效果圖

新手一枚，希望能幫助到大家，也希望獲得大家的指點

使用jquery對複選框進行全選/反選

首先看一下結構 <span style="color:#3333ff;"> <body> <div> <form action="" method="post"> <table>

使用jQuery完成複選框的全選和全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" s

使用jQuery做複選框的全選與取消

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type

jquery實現複選框checkbox全選取消全選

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的，是Iterator迴圈遍歷出來的。<td class="rd8"><input type="checkbox" name="selectFlag" id="selectFlag" valu

jQuery複選框實現全選、全不選、反選、獲取選項值

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>複

jquery實現複選框checkbox全選，取消全選

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的，是Iterator迴圈遍歷出來的。 <td class="rd8"> <input type="checkbox" name="selectFlag" id="selectFlag" value="<%=

jQuery 實現複選框的全選與反選

jquery對複選框(checkbox)的操作彙總

query操作複選框(checkbox)的12個小技巧。 1、獲取單個checkbox選中項(三種寫法) ? 1 $("input:checkbox:checked").val()

JQuery 迴圈遍歷 , 複選框全選全消反選checked屬性

陣列集合的遍歷 $.each(list,function(index,item){ this. //this就表示item}); jquery物件的迴圈遍歷 jquery物件.each(function(){ this. //this就表示迴圈的jquery物件})

jQuery學習(五)——使用JQ完成復選框的全選和全不選

function () thead java round 綁定使用 table check 1、在系統後臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選步驟分析：第一步：引入jquery文件第二步：書寫頁面加載函數第三步：為上面的復選框綁定單擊事件第四步

jQuery實現復選框的全選，全不選，反選

全不選 title www add bold tab 要求 bsp input <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></tit

九九乘法表+計算器+複選框（全選+反選）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/jav

製作複選框的全選/全不選效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選功能測試</title> <script type="text/javascr

HTML複選框實現全選反選全不選的簡單小例項

複選框實現全選反選全不選的簡單小例項 <html> <head> <title>HTML</title> <style type="text/css"> </style&g

js實現複選框的全選取消全選

html虛擬碼 <table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>

jQuery實現多選框的全選按鈕自動選中與消失

頁面中實現全選,反選,一組複選框選中時全選按鈕自動選中,一組中有一個未選中時全選按鈕取消 $('#checkAll').click(function(){ if(this.checked) { $("input[type=ch

【javaweb】JQ實現複選框的全選與全不選

需求：針對複選框，實現全選和全不選的操作步驟分析：1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 &n

利用js實現複選框的全選和反選

<!DOCTYPE html> <html> <head> <title>142</title> <meta charset="utf-8"> <script type="t

JavaScript實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var

js複選框實現全選、全不選、反選

通過input就可以將一個簡單的複選框呈現在頁面上 <input type="checkbox" /> 要實現的大概就是這樣一個頁面思路全選因為要得到複選框陣列，而id又不能重複。所以通過name來得到複選框陣列。得到陣列後遍歷，將

使用jquery對複選框進行全選/反選

相關推薦