當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

帆软单选按钮实例_HTML单选按钮示例教程

發(fā)布時間：2024/1/1 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了帆软单选按钮实例_HTML单选按钮示例教程小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

帆軟單選按鈕實例

In the old times, radios have some buttons to change stations that have saved to a specific button. HTML also provides radio buttons in order to one of the radio buttons in a group of them. Radio buttons in HTML are defined with the <input> tag because the Radio button is referred to as an input from the user.

在過去，收音機具有一些按鈕來更改已保存為特定按鈕的電臺。 HTML還提供了單選按鈕，以便于一組單選按鈕中的一個。 HTML中的單選按鈕是用<input>標(biāo)記定義的，因為單選按鈕被稱為來自用戶的輸入。

單選按鈕標(biāo)簽 (Radio Button Tag)

We will define a radio button with the <input> tag by providing the type as radio like below. Radio button tag does not have an enclosing tag like </input> etc.

我們將通過提供type為radio的type (如下所示)來定義帶有<input>標(biāo)簽的單選按鈕。單選按鈕標(biāo)簽沒有像</ input>這樣的封閉標(biāo)簽。

單選按鈕組 (Radio Button Group)

Radio buttons generally used as a group. Because the main usage case for the radio button is providing some choices to the user and the user selects one of them. So we generally provide multiple radio buttons as a group. In or der to create groups the radio buttons name attribute should be the same for all radio buttons in the same group. For example, if we want to ask the user age range we have to use the same name for all radio buttons like below.

單選按鈕通常作為一個組使用。因為單選按鈕的主要用法是向用戶提供一些選擇，然后用戶選擇其中之一。因此，我們通常將多個單選按鈕作為一組提供。在創(chuàng)建組時，對于同一組中的所有單選按鈕，單選按鈕名稱屬性應(yīng)相同。例如，如果要詢問用戶年齡范圍，則必須對所有單選按鈕使用相同的名稱，如下所示。

<html><body><h2>Radio Buttons</h2><form><input type="radio" name="age" value="b18"> Below 18<br><input type="radio" name="age" value="o18"> Between 18 and 65 <br><input type="radio" name="age" value="o65"> Over 65 </form></body> </html> Radio Button Group單選按鈕組

設(shè)置默認單選按鈕選擇(Set Default Radio Button Selection)

As one of the radio buttons is selected explicitly by the user the default behavior is all of the radio buttons are unselected. In some cases, we need to provide one radio button as selected by default. We can use checked attributed inside the input tag. In this example, we will provide the Between 18 and 65 selected o checked by default.

由于用戶明確選擇了其中一個單選按鈕，因此默認行為是未選中所有單選按鈕。在某些情況下，我們需要提供一個默認選中的單選按鈕。我們可以在輸入標(biāo)記中使用checked屬性。在此示例中，我們將提供默認情況下選中的Between 18 and 65 o。

檢查給定單選按鈕是否已選中(Check If Given Radio Button Selected)

After selecting a radio button we can get or check selected radio button value in JavaScript. We can use different frameworks AngularJS, jQuery, etc but for simplicity, we will use plain JavaScript. We will get the values from the radio button name and iterate over it.

選擇單選按鈕后，我們可以獲取或檢查JavaScript中選定的單選按鈕值。我們可以使用不同的框架AngularJS，jQuery等，但是為簡單起見，我們將使用純JavaScript。我們將從單選按鈕名稱中獲取值并對其進行迭代。

<html><body><h2>Radio Buttons</h2><form><input type="radio" name="age" value="b18" > Below 18<br><input type="radio" name="age" value="o18" checked> Between 18 and 65 <br><input type="radio" name="age" value="o65"> Over 65 </form><br><input type=button onClick="ValidateForm()" value="Check Radio Buttons"><script type="text/javascript">function ValidateForm(){var radioButtons = document.getElementsByName("age");for(var i = 0; i < radioButtons.length; i++){if(radioButtons[i].checked == true){alert("You have selected"+radioButtons[i].value)}}}</script></body> </html>

禁用單選按鈕 (Disable Radio Button)

Radio buttons can be used in different scenarios with where in some cases they must be disabled. We can disable a radio button by using disabled attribute which will disable and prevent selection of the radio button. In this example, we will disable the Over 65 radio button.

單選按鈕可以在不同的情況下使用，在某些情況下必須禁用它們。我們可以通過使用disabled屬性來禁用單選按鈕，該屬性將禁用和阻止選擇單選按鈕。在此示例中，我們將禁用“ Over 65單選按鈕。

<html><body><h2>Radio Buttons</h2><form><input type="radio" name="age" value="b18" align="left" > Below 18<br><input type="radio" name="age" value="o18" checked> Between 18 and 65 <br><input type="radio" name="age" value="o65" disabled> Over 65 </form><br></body> </html> Disable Radio Button禁用單選按鈕

單選按鈕與復(fù)選框(Radio Button vs Check Boxes)

Like the radio button, there are also checkboxes that provide selection in multiple choices. The main difference between the radio button and checkbox is only a single radio button can be checked at one but multiple checkboxes can be checked without a problem.? So radio button suites to single answer questions like age, gender, yes/no, etc. where checkboxes can be sued multiple answer questions like team, schools, cities, etc.

像單選按鈕一樣，也有復(fù)選框提供多個選擇。單選按鈕和復(fù)選框之間的主要區(qū)別在于，一次只能選中一個單選按鈕，但可以無問題地選中多個復(fù)選框。因此，單選按鈕套件可用于回答單個答案問題，例如年齡，性別，是/否等。在這里，可以對復(fù)選框使用團隊，學(xué)校，城市等多個回答問題。

翻譯自: https://www.poftut.com/html-radio-button-tutorial-with-examples/