jQuery選擇器中的單選按鈕是一種常用的頁面元素,它可以讓用戶在多個選項中進行單選。下面我們來看看如何使用jQuery選擇器實現這種單選按鈕。
HTML代碼:
<div class="radio-box">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
jQuery代碼:
$(".radio-box input[type='radio']").click(function(){
$(this).parent().addClass("active").siblings().removeClass("active");
});
上面的HTML代碼中,我們定義了一個包含兩個單選按鈕的div元素。它們的name屬性都為gender,分別表示男和女。當用戶點擊其中一個單選按鈕時,該按鈕的value值會被提交到后臺服務器。
接下來是jQuery代碼,我們使用$()函數來選中包含單選按鈕的div元素,然后使用click()事件監聽器來實現按鈕的單擊事件。當用戶單擊某個單選按鈕時,執行的回調函數會將該按鈕所在的div元素添加一個名為active的CSS類,并將其兄弟元素(即同級別的其他單選按鈕所在的div元素)移除active類。
這樣,當用戶進行單選時,只有選中的單選按鈕所在的div元素會被高亮顯示。