Jquery如何操作多選框？
Html代碼里多選框控件，在生成后多數情況都是給用戶點擊選擇的，但有時候程序也需要操作這些控件。下面一起來看下用JQuery怎么操作。
操作方法
-
01
首先看下我們的Html代碼，就是一組Checkbox多選框，和一組操作的按鈕。
代碼里記得先引入Jquery插件腳本。 -
02
看下現在頁面的顯示效果，就是一組很標準的多選框和按鈕。
-
03
我們先添加第一個按鈕的邏輯。
用Jquery選中一個多選框，我們用id選擇器選中這個多選框，然后調用prop方法，設置它的屬性 checked為 true就行了。
("#cbSRF").prop("checked", true); -
04
刷新運行頁面，我們點擊第一個按鈕，如圖，程序自動把第二個多選框選中了。
-
05
接著寫第二個按鈕的邏輯，所有的多選框都選中，我們用class選擇器選中所有的多選框，然后還是調用prop方法，設置它的屬性 checked為 true。
因為所有的多選框都有樣式為 cb的Class，所以(".cb")就是選擇了所有的選擇框。
(".cb").prop("checked", true); -
06
再次刷新頁面，點擊第二個按鈕，所有的多選框都呈選中狀態了。
-
07
接著寫第三個按鈕的邏輯，獲取選中的多選框的值。
這次我們的選擇器是(".cb:checked")， 即class為 cb, 且是選中狀態的多選框（:checked），沒有選中的排除。
然后循環這些選中的項，用val()方法取得它的值，放到字符串，最后彈框輸出。 -
08
刷新頁面后，我們先選中第一項和第二項，然后點擊第三個按鈕。得到正確結果，如圖
-
09
第四個按鈕的邏輯，設置一個多選框為不可用狀態，在這個狀態下，用戶不能點擊選中它。
我們用id選擇器選中這個選項，然后用prop方法，設置 disabled屬性為true就行了。 -
10
刷新頁面，點擊第四個按鈕，可以看到最后一個選項的選框顏色變灰了，用鼠標去點擊，也是不能選中的。
- End
- 發表于 2017-09-15 00:00
- 閱讀 ( 815 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章