廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 4523 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[JScript][討論] 用CheckBox來做全選/全取消/反向選取
有人問說..可否做到點選某CheckBox後,來達到全選及全取消的效果。若只是要做到這樣,那未免也太簡單了點,所以我就多加了一個反向選取的效果。

先來看下列的Code:



在Body裡面只是加了幾個CheckBox及三個Button。每一個Button的Click都會觸發各自的方法。每個CheckBox的name都是相同的。

先來看全選這個方法。



我用document.all.namedItem("c1")來取得表單裡面name為c1的CheckBox的集合checkItem。再來就是跑個迴圈一一把checkItem陣列中每一個的checked值設成true即可。

全取消的做法也是同全選,只是要把checked值設成false。



不過醬的功能好像還蠻常見到的,像是Yahoo的信箱就有提供這樣全選的功能了,但若只是做到全選或是全取消的話,好像還不夠用,所以我還多加了一個反向選取的功能。

什麼是反向選取?其實這只是種比較貼心的應用方法,比如我們有10個CheckBox選項,可是在我們選完第1,3,5,7,9的選項後,卻又想改選為第2,4,6,8,10選項時怎樣辦?先把1,3,5,7,9點掉再勾選2,4,6,8,10嗎?這樣實在太不方便了。所以,反項選取就是把勾選的變成未勾選;未勾選的變成勾選。醬子只要點一下反向選取就能達到上面範例的目的了。

再來看反向選取的Code:



反向選取的做法其實就跟全選/全取消是一樣,只是多加了個判斷,若是checked值為true時就改為false;若checked值為false時就改為true。只是我在指定值時用的一個驚嘆號(!),這表示相反的意思。怎樣,並不難吧。

其實這幾個方法沒用到什麼比較難的語法,只要知道原理就能做出來哩。

範例瀏覽:

http://abgne.myweb.hinet...0002.html

以上內容於2005/08/31發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/3855816



歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x0 回到頂端 [樓 主] From:台灣中華電信 | Posted:2006-01-17 21:33 |
large 手機
數位造型
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x85
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

真是貼心的設計阿
以前也有被人問過,想了一段時間才解決說
不過剛剛事了一下,發現到你的反向選取好像會停頓喔
連按兩次反而不會李我都不動,奇怪的問題勒~ 表情


獻花 x0 回到頂端 [1 樓] From:台灣數位聯合 | Posted:2006-01-28 19:47 |
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

停頓?
我試是不會有這種情形耶..

至於連按兩下會沒反應 這是因為 Event的關係吧...
或許加個ondblclick下去會改善^^a


歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x0 回到頂端 [2 樓] From:台灣中華電信 | Posted:2006-01-31 19:26 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.084702 second(s),query:16 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言