【jQuery】jQuery實現checkbox的全選/反選邏輯
在開發過程中,會遇到需要進行一個checkbox對多個checkbox進行全選/反選的邏輯
假如有一個網頁,是這樣的
<input id='selectAll'/><label for='selectAll'>全選</label>
<input type='button' id='reselect'/>反選
<input class='day' id='monday'/><label for='monday'>星期一</label>
<input class='day' id='tuesday'/> <label for='tuesday'>星期二</label>
<input class='day' id='wednesday'/><label for='wednesday'>星期三</label>
<input class='day' id='thrusday'/><label for='thrusday'>星期四</label>
<input class='day' id='friday'/><label for='friday'>星期五</label>
<input class='day' id='saturday'/><label for='saturday'>星期六</label>
<input class='day' id='sunday'/><label for='sunday'>星期日</label>
點選全選全部選中或者全部不選中下面所有的checkbox
$('#selectAll').on('click', function() {
$('.day').prop('checked', $(this).prop('checked'));
});
點選每一個checkbox時,檢查是否已經全選
$('.day').on('click', function() {
$('#selectAll').prop('checked', $('.day').length == $('.day:checked').length);
});
點選反選
$('#reselect').on('click', function() {
$('.day').each(function() {
$(this).prop('checked', !$(this).prop('checked'));
});
});
相關推薦
【jQuery】jQuery實現checkbox的全選/反選邏輯
在開發過程中,會遇到需要進行一個checkbox對多個checkbox進行全選/反選的邏輯 假如有一個網頁,是這樣的 <input id='selectAll'/><l
jquery實現checkbox全選功能,第二次點選【全選】按鈕,頁面無法勾選
去面試,老多人問會不會jQuery啊,會不會ExtJS啊,以前都零星使用過,是使用別人封裝好的版本,沒單獨研究過這些前端技術,閒暇之餘,先研究研究jQuery。 找了本書,做了個jQuery實現全選功能的例子,覺得程式碼邏輯上都沒有問題,第二次點選【全選】按鈕頁面就是無法勾
jquery實現checkbox全選/反選/取消
全選 反選 取消所有 IP port domain action 1.1.1.1 90 1.bai.com 1.1.1.2
JQuery實現checkbox全選和反選
function selectAll(){ //id=all是全選/反選的checkbox,判斷是選中還是沒選中 var isChecked=$("#all").is(':checked'); //獲取所有checkbox組成的陣列 var checkedArrs=$("inpu
【轉載】jquery實現勾選複選框觸發事件給input賦值+回顯複選框
JSP: <td class="as1"> <input type="checkbox" name="gdzc" value="1" id="t0" class="az"/><label for="t0" class="as">商品房</label><
jQuery(5)--實現checkbox的全選,反選,全不選功能
頁面如下: 原始碼: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>demo04.ht
jquery實現全選/反選功能
click demo lar sim llc res rip rop 個數 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/h
jQuery實現全選反選功能
ava -type func tex solid blog pan 原因 input 廢話不說,直接上代碼! <html> <head> <meta http-equiv="Content-Type" content="text/html;
jquery 實現頁面全選反選功能
python<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head>&
jquery實現全選 反選 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g
jquery實現購物車全選反選功能
利用jquery實現購物車中全選(反選)換圖功能,具體程式碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta cont
jQuery的CheckBox全選反選時,勾選失效的問題
利用removeAttr()和prop()方法,完全沒問題。 在做複選框的時候,全選、反選應該是比較常用的功能。我在做這個功能時,發現多次全選、反選之後,頁面展示的“勾選”效果失敗了,頁面上沒有展示出勾選效果。但是追蹤js,發現已經是選中狀態
JQuery 實現複選框全選反選功能
HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty
【javaweb】JQ實現複選框的全選與全不選
需求:針對複選框,實現全選和全不選的操作 步驟分析:1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 &n
購物車功能:使用jQuery實現購物車全選反選,單選,商品增刪,小計等功能
效果圖: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬購物車功能-jq</title>
【JavaScript】jquery右鍵點選事件和js禁用右鍵事件程式碼
jQuery滑鼠點選事件函式//jQuery滑鼠左擊、右擊和中擊事件 $('div').mousedown(function(e){ if(e.which == 3){ alert(
【php】jquery中$.get實現解析json格式資料及jsonp跨域
一直以來都是寫ajax都是使用$.getjson這個方法,主要圖的就是跨域方便,當然跨域有時候也會帶來不安全的隱患,現在專案中是$get,例子中基本上返回的是string格式,自己寫getjson寫習慣,想返回json格式的。下面就介紹三種實現json格式返回的方法。
jquery實現全選,反選,不選和提交按鈕
我的一個php檔案: <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" s
jquery實現全選反選操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <hea
【Jquery】jQuery獲取URL參數的兩種方法
ont ras mil scrip line 兩種方法 lower quest request jQuery獲取URL參數的關鍵是獲取到URL,然後對URL進行過濾處理,取出參數。 location.href是取得URL。location.search是取得URL“?