jQuery Mobile 是一個高度可定制的 JavaScript 庫,可以幫助開發(fā)者輕松創(chuàng)建基于移動設(shè)備的 Web 應(yīng)用程序。其中之一的功能就是單選按鈕,以下是有關(guān)該功能的一些說明。
要使用單選按鈕,需要添加以下 HTML 代碼:
<fieldset data-role="controlgroup"> <legend>選擇一個選項(xiàng):</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1"> <label for="radio-choice-1a">選項(xiàng)1</label> <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-2"> <label for="radio-choice-1b">選項(xiàng)2</label> <input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-3"> <label for="radio-choice-1c">選項(xiàng)3</label> </fieldset>
這段代碼將創(chuàng)建一個包含選項(xiàng)的 fieldset。每個選項(xiàng)都是用 input 標(biāo)簽創(chuàng)建的,并且每個 input 標(biāo)簽都有相同的 name 屬性。這表示它們是相同單選按鈕組的一部分。
要使用 jQuery Mobile 樣式和主題,需要將 data-role 屬性設(shè)置為 "controlgroup"。
要在代碼中獲取選中的選項(xiàng),可以使用以下代碼:
var selectedOption = $('input[name=radio-choice-1]:checked').val();
這段代碼將返回選中選項(xiàng)的值。
總的來說,jQuery Mobile 的單選按鈕功能可以讓開發(fā)者輕松地創(chuàng)建漂亮且易于使用的選項(xiàng)組。通過設(shè)置相同的 name 屬性,選項(xiàng)可以作為一個組被處理。開發(fā)者可以使用 jQuery Mobile 樣式和主題來匹配應(yīng)用程序的外觀和感覺。