酷知百科網

位置:首頁 > 遊戲數碼 > IT技術

Jquery如何操作多選框?

IT技術9.96K

Html代碼裏多選框控件,在生成後多數情況都是給用戶點擊選擇的,但有時候程序也需要操作這些控件。下面一起來看下用JQuery怎麼操作。

操作方法

(01)首先看下我們的Html代碼,就是一組Checkbox多選框,和一組操作的按鈕。代碼裏記得先引入Jquery插件腳本。

Jquery如何操作多選框?

(02)看下現在頁面的顯示效果,就是一組很標準的多選框和按鈕。

Jquery如何操作多選框? 第2張

(03)我們先添加第一個按鈕的邏輯。用Jquery選中一個多選框,我們用id選擇器選中這個多選框,然後調用prop方法,設定它的屬性 checked爲 true就行了。$("#cbSRF")("checked", true);

Jquery如何操作多選框? 第3張

(04)重新載入執行頁面,我們點擊第一個按鈕,如圖,程序自動把第二個多選框選中了。

Jquery如何操作多選框? 第4張

(05)接着寫第二個按鈕的邏輯,所有的多選框都選中,我們用class選擇器選中所有的多選框,然後還是調用prop方法,設定它的屬性 checked爲 true。因爲所有的多選框都有樣式爲 cb的Class,所以$("")就是選擇了所有的選擇框。$("")("checked", true);

Jquery如何操作多選框? 第5張

(06)再次重新載入頁面,點擊第二個按鈕,所有的多選框都呈選中狀態了。

Jquery如何操作多選框? 第6張

(07)接着寫第三個按鈕的邏輯,獲取選中的多選框的值。這次我們的選擇器是$(":checked"), 即class爲 cb, 且是選中狀態的多選框(:checked),沒有選中的排除。然後循環這些選中的項,用val()方法取得它的值,放到字元串,最後彈框輸出。

Jquery如何操作多選框? 第7張

(08)重新載入頁面後,我們先選中第一項和第二項,然後點擊第三個按鈕。得到正確結果,如圖

Jquery如何操作多選框? 第8張

(09)第四個按鈕的邏輯,設定一個多選框爲不可用狀態,在這個狀態下,用戶不能點擊選中它。我們用id選擇器選中這個選項,然後用prop方法,設定 disabled屬性爲true就行了。

Jquery如何操作多選框? 第9張

(10)重新載入頁面,點擊第四個按鈕,可以看到最後一個選項的選框顏色變灰了,用鼠標去點擊,也是不能選中的。

Jquery如何操作多選框? 第10張
標籤:JQuery 選框