使用jQuery設置多選按鈕默認
多選按鈕是網頁中常見的一種交互控件,它可以讓用戶選擇多個選項。在某些情況下,我們需要默認選中幾個選項,本文將介紹如何使用jQuery設置多選按鈕的默認選項。
首先,我們需要給多選按鈕設置一個固定的id屬性,例如:
上面的代碼創建了一個包含三個多選按鈕的表單,它們的name屬性均為“fruit”,id屬性分別為“apple”、“banana”和“orange”。
現在,假設我們需要默認選中蘋果和香蕉這兩個選項。我們可以使用以下的jQuery代碼:
上面的代碼使用了jQuery的prop方法,將“checked”屬性設置為true。
在以上代碼中,使用了匿名函數包含了設置多選按鈕默認值的代碼。這是為了確保代碼在DOM加載完畢后才執行。
最后,我們再次注意,多選按鈕的id和name屬性分別用于標識和組織多選按鈕,而prop方法則用于設置多選按鈕的屬性。
綜上所述,本文介紹了如何使用jQuery設置多選按鈕的默認選項,使用prop方法進行設置。希望對大家有所幫助。
多選按鈕是網頁中常見的一種交互控件,它可以讓用戶選擇多個選項。在某些情況下,我們需要默認選中幾個選項,本文將介紹如何使用jQuery設置多選按鈕的默認選項。
首先,我們需要給多選按鈕設置一個固定的id屬性,例如:
<p>請選擇: </p> <pre> <input type="checkbox" name="fruit" id="apple" value="蘋果"> <label for="apple">蘋果</label> <input type="checkbox" name="fruit" id="banana" value="香蕉"> <label for="banana">香蕉</label> <input type="checkbox" name="fruit" id="orange" value="橙子"> <label for="orange">橙子</label>
上面的代碼創建了一個包含三個多選按鈕的表單,它們的name屬性均為“fruit”,id屬性分別為“apple”、“banana”和“orange”。
現在,假設我們需要默認選中蘋果和香蕉這兩個選項。我們可以使用以下的jQuery代碼:
$(function() { $('#apple').prop('checked', true); $('#banana').prop('checked', true); });
上面的代碼使用了jQuery的prop方法,將“checked”屬性設置為true。
在以上代碼中,使用了匿名函數包含了設置多選按鈕默認值的代碼。這是為了確保代碼在DOM加載完畢后才執行。
最后,我們再次注意,多選按鈕的id和name屬性分別用于標識和組織多選按鈕,而prop方法則用于設置多選按鈕的屬性。
綜上所述,本文介紹了如何使用jQuery設置多選按鈕的默認選項,使用prop方法進行設置。希望對大家有所幫助。