Usage analysis of radio button control label in html and how to set default selection_html/css_WEB-ITnose

Radio object represents a radio button in an HTML form. Each time appears in an HTML form, a Radio object is created. A radio button represents one of a set of mutually exclusive option buttons. When a button is selected, the previously selected button becomes unselected. When a radio button is selected or unselected, the button fires the onclick event handler. You can access the Radio object by iterating over the form's elements[] array, or by using document.getElementById(). Collected and organized by www.169it.com

1. Radio button control syntax

1

1

Use html input tag, name is customized, type type The form for "radio".

2. Radio radio button code example

1 2 3 4 5 6 7 8

您最喜欢水果？ 苹果 桃子 香蕉 梨 其它

1. HTML code snippet:

1 2 3

学生 教师 管理员

1 2 3 4 5 6 7 8

What is your favorite fruit?

Apple Taozi Banana Pear Others < /form>

2. Example code snippet 2 (default selected setting example):

1 2 3

Students Teacher Administrator

In the two code examples, checked="checked" indicates the default selected item settings.

3. Code example three (js operation radio):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<script></p> <p><!--</p> <p> //选中2返回的也是1，找到第一个ID为该值的DOM，弹出 1</p> <p> function getVById(){alert(document.getElementById('test11').value);}</p> <p> function getVByName(){</p> <p> var tt = document.getElementsByName('test11');</p> <p> for (var iIndex = 0; iIndex < tt.length ; iIndex )</p> <p> {</p> <p> if(tt[iIndex].checked)</p> <p> {</p> <p> alert(tt[iIndex].value);</p> <p> break;</p> <p> }</p> <p> }</p> <p> };</p> <p>--></p> <p></script>     测试1     测试2

1

2

3

4

5

6

7

8

9

10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

< ;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script> <!--<🎜> <🎜> //Selecting 2 also returns 1. Find the first DOM with this value and pop up 1<🎜> <🎜> function getVById(){alert(document.getElementById('test11').value);}<🎜 > <🎜> function getVByName(){<🎜> <🎜> var tt = document.getElementsByName('test11');<🎜> <🎜> for (var iIndex = 0; iIndex < tt.length ; iIndex )< 🎜> <🎜> {<🎜> <🎜> if(tt[iIndex].checked)<🎜> <🎜> {<🎜> <🎜> alert(tt[iIndex].value );<🎜> <🎜> break;<🎜> <🎜> }<🎜> <🎜> }<🎜> <🎜> };<🎜> <🎜>--> </script> Test 1 Test 2 ;

Article source: Analysis of radio button control label usage in HTML and how to set default selection