[精讚] [會員登入]
11413

[Jquery] 複選的checkbox取值

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

分享此文連結 //n.sfs.tw/13169

分享連結 [Jquery] 複選的checkbox取值@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 09:51:21 最後編修
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/

END

你可能感興趣的文章

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

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

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

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

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

[CKeditor4] 修改調色盤 修改ckeditor預設的調色盤

隨機好文

[Win7] 燒錄 iso 檔 在Windows7 中內建燒錄程式,可以直接把檔案拉到光碟機裡,再執行燒錄。

UTF-8的網頁但IE8一片空白 UTF8編碼的網頁在Firefox 正常顯示、但IE8 就是空白,IE8編碼設定是「自動偵測」可是自動偵測到的是 big5...

APACHE的記錄檔格式 LogFormat 語法 在APACHE中有定義一些記錄的語法模版 在 /etc/httpd/conf/httpd.conf 中: LogForm

「許功蓋」的字以及源由 有玩過電腦一段時間的人,都聽過這個人(有一天我才發現7年級的竟然都不認識這個

[MAC] 安裝APACHE+PHP OS Darwin OpenIDMac1deAir 15.6.0 Darwin Kernel Version 15.6.