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

帆软单选按钮实例

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>标记定义的，因为单选按钮被称为来自用户的输入。

单选按钮标签 (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>标签的单选按钮。单选按钮标签没有像</ input>这样的封闭标签。

<input type="radio">

单选按钮组 (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.

单选按钮通常作为一个组使用。因为单选按钮的主要用法是向用户提供一些选择，然后用户选择其中之一。因此，我们通常将多个单选按钮作为一组提供。在创建组时，对于同一组中的所有单选按钮，单选按钮名称属性应相同。例如，如果要询问用户年龄范围，则必须对所有单选按钮使用相同的名称，如下所示。

<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>

设置默认单选按钮选择(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.

由于用户明确选择了其中一个单选按钮，因此默认行为是未选中所有单选按钮。在某些情况下，我们需要提供一个默认选中的单选按钮。我们可以在输入标记中使用checked属性。在此示例中，我们将提供默认情况下选中的Between 18 and 65 o。

<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></body>
</html>

检查给定单选按钮是否已选中(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>

单选按钮与复选框(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.

像单选按钮一样，也有复选框提供多个选择。单选按钮和复选框之间的主要区别在于，一次只能选中一个单选按钮，但可以无问题地选中多个复选框。因此，单选按钮套件可用于回答单个答案问题，例如年龄，性别，是/否等。在这里，可以对复选框使用团队，学校，城市等多个回答问题。

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

帆软单选按钮实例