在頁面中實現(xiàn)單選按鈕是非常常見的需求。jQuery是一個強大的JavaScript庫,可以讓我們輕松實現(xiàn)這樣的功能。
首先,我們需要在HTML中創(chuàng)建一個單選按鈕。以下是一個例子:
<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女
在這個例子中,我們創(chuàng)建了兩個單選按鈕,分別表示男性和女性。它們具有相同的name屬性“gender”,這意味著它們是一組單選按鈕。我們也為每個單選按鈕提供了一個值。
現(xiàn)在,我們可以使用jQuery來獲取用戶選擇的單選按鈕。以下是一個例子:
$(document).ready(function() { $('input[name="gender"]').change(function() { var selectedGender = $('input[name="gender"]:checked').val(); alert("您選擇的性別是:" + selectedGender); }); });
在這個例子中,我們通過jQuery選擇器獲取了所有name屬性為“gender”的單選按鈕,并為它們綁定了一個change事件。當用戶選擇其中一個單選按鈕時,change事件就會被觸發(fā)。在這個事件處理函數(shù)中,我們使用:checked選擇器獲取已選中的單選按鈕,并獲得它的值,最后通過一個彈出窗口向用戶展示選擇結(jié)果。
通過以上兩個例子,我們可以輕松地實現(xiàn)頁面中的單選按鈕功能。但是需要注意的是,name屬性要相同才能實現(xiàn)單選按鈕的組合功能,而:checked選擇器可以獲取已選中的單選按鈕的值。
下一篇jquery 定時