jQuery是一個流行的JavaScript庫,用于在網頁中創建交互性和動態性。在網頁中,單選按鈕是一種常見的表單元素,允許用戶在一組選項中選擇一個單一的選項。在本文中,我們將介紹如何使用jQuery來控制單選按鈕的選中狀態。
// 首先,我們需要為單選按鈕組添加一個共同的類名 <input type="radio" class="radio-btn" name="option" value="Option 1" /> <input type="radio" class="radio-btn" name="option" value="Option 2" /> <input type="radio" class="radio-btn" name="option" value="Option 3" /> // 通過jQuery選擇器來選中單選按鈕組,并為其綁定change事件,當選中的單選按鈕改變時觸發 $('.radio-btn').change(function() { // 使用jQuery this方法選中當前選中的單選按鈕,并獲取其值 var selectedOption = $(this).val(); // 在控制臺中輸出選中的值 console.log(selectedOption); });
如上所述,我們首先為單選按鈕組添加一個共同的類名,并使用jQuery選擇器選中該按鈕組。然后,我們使用change方法為單選按鈕組綁定一個change事件。每次選中的單選按鈕發生變化時,change事件將被觸發,并調用一個函數。函數中,我們使用jQuery this方法選中當前選中的單選按鈕,并獲取其值。最后,我們在控制臺中輸出選中的值以進行測試。
通過使用jQuery來控制單選按鈕的選中狀態,我們可以使網頁更加動態和交互性,從而提高用戶體驗。