[精讚] [會員登入]
557

[Jquery] 複選的checkbox取值

遇到複選的checkbox該如何取值?

此文完整連結 http://n.sfs.tw/13169

複製連結 [Jquery] 複選的checkbox取值@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-03-21 00:13:54 最後編修
2019-03-17 01:40:43 By 張○○
 

input checkbox欄位一般的用法是這樣

<input name="divide" type="checkbox" /> <label>使用分隔</label>

接收變數時要檢查有沒有"divide" 這個名稱的值即可:

if( !empty($_GET['divide'])) { ... }

但是如果遇到同類型的要選,每個這樣子取名字,和再將取得的值組合,真是麻煩事。

還好,checkbox欄位是可以設定陣列,同時指定 value值,在接收變數時只要取一次即可。

HTML

選擇分格方式   
<input name="divide[]" type="checkbox" value="newline" /> <label>換行</label>
<input name="divide[]" type="checkbox" value="tab"> <label>TAB</label>
<input name="divide[]" type="checkbox" value="semicolon"> <label>分號</label>
<input name="divide[]" type="checkbox" value="colon"> <label>逗點</label>
<input name="divide[]" type="checkbox" value="blank"> <label>空格</label>

這裡name是 divide[],divide變數名後面加了中刮號 "[]"

如果直接submit出去,得到的 $_GET['divide']會是一個陣列

Array(3) [ "newline", "semicolon", "colon" ]

這樣子好處是只要取一次值即可。

但要特別注意,如果使用者全部都沒勾選的話,該變數會不存在

如果要在前端使用jquery取值的話,寫法是這樣的:

var divs= $("input[name='divide[]']:checked").map(function() { return $(this).val(); }).get();

divs 在JS中是個陣列

Array(3) [ "newline", "semicolon", "colon" ]

特別注意那個 name裡面不能只寫 [name='divide']。

漏了中刮號的話你什麼都取不到,至於[1]可以作用?可能是不同版本的jquery不同吧。

 

參考資料

[1] http://blog.twbryce.com/jquery-get-checkbox-value/

你可能感興趣的文章

[jQuery] select 元件的取值及給值 html中的元件select,在jquery中要如何使用?

Jquery 圖片放大的工具:放大鏡 想讓網頁上的圖片局部放大,有沒有簡單好用的 jquery?

Javascript/Jquery 建立、讀取、刪除cookie值 Javascript/Jquery 建立、讀取、刪除cookie值

[CKeditor4] 修改特殊字元 CKeditor4 中設定自己想用的特殊字元

[Javascript/Jquery] 移除textarea中空行、空白行。 textarea中要移除沒內容的空行、只有空白的行、只有定位字元的行

[Javascript] NaN是什麼? javascript 的NaN和取得整數

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

[Javascript] 陣列、陣列的操作 Javascript 的陣列操作:宣告、取值、賦值、插入或移除項目,檢查KEY、檢查是否為陣列等等

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

HP SAS硬碟leds燈號說明 HP SAS硬碟leds燈號(hp g7/g6系統適用)說明

[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

好用的3+2碼郵遞區號查詢系統推薦 網路上找到用地址輸入判斷3+2碼郵遞區號的辨識率不高,除了這個網站…