Analysis of tag usage of the <radio> radio button control in html and how to set the default selection, radio button control
The Radio object represents the single-choice button in the HTML form. Each time <input type = "radio"> appears in an HTML form, a Radio object is created. A single-choice button is one of a group of mutex options. When a button is selected, the previously selected button becomes unselected. When a single-choice button is selected or not selected, this button triggers the onclick event handle. You can access the Radio object by traversing the elements [] array of the form, or by using document. getElementById (). Collected by www.169it.com
I. radio button control syntax
1 |
<Input name = "Fruit" type = "radio" value = ""/> |
Use html input tag, name is custom, type is "radio" form.
Ii. Example code of the radio button
1. html code snippet:
1 2 3 4 5 6 7 8 |
<Form action = "" method = "get"> What kind of fruit do you like best? <Br/> <Label> <input name = "Fruit" type = "radio" value = ""/> Apple </label> <Label> <input name = "Fruit" type = "radio" value = ""/> peach </label> <Label> <input name = "Fruit" type = "radio" value = ""/> banana </label> <Label> <input name = "Fruit" type = "radio" value = ""/> LI </label> <Label> <input name = "Fruit" type = "radio" value = ""/> others </label> </Form> |
2. Sample Code Segment 2 (selected by default ):
1 2 3 |
<Input type = "radio" name = "identity" value = "student" checked = "checked"/> Student <Input type = "radio" name = "identity" value = "instructor"/> instructor <Input type = "radio" name = "identity" value = "Administrator"/> Administrator |
In the code example, checked = "checked" indicates the selected item setting by default.
3. Sample Code 3 (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 |
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gbk"> <Script> <! -- // Select 2 and return 1. Find the First DOM with the ID of this value. 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> <Title> http://www.169it.com </title> </Head> <Body> <Input type = "radio" id = "test11" name = "test11" value = "1"/> Test 1 <Input type = "radio" id = "test11" name = "test11" value = "2"/> Test 2 <Input type = "button" value = "BTN_ByID" onclick = "getVById ()"/> <Input type = "button" value = "BTN_ByName" onclick = "getVByName ()"/> </Body> <Html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
