Home > Developer > JavaScript
Radio is a form element that is very commonly used in form forms, and for radio operations, the checked attribute of radio is used to manipulate the radio property of checked. Gets the selected value of the radio, traverses the radio button entry, finds the button in the state of the selected (checked), and returns its value, and when assigned to radio, finds the corresponding button item and the Checked property to True.
Get Radio Value
METHOD1 Traversal Radio Collection
If we given a page
<body>
<p>
<label for= "DOORCT" >doors:
<input type= "Radio" name= "DOORCT" Twodoor "checked=" true "onclick=" GetValue () ">two <input type=" Radio "name=" DOORCT "
value=" Fourdoor " Onclick= "GetValue ()" >four
</label>
</p>
</body>To get the selected button value in it, how do I take it?
1 Get the Radio collection by the Name property
2 traversing each element of the collection
3 Gets the checked property of the element, is true, true, returns its value value
function GetValue () {
//Method 1
var radio = document.getelementsbyname ("doorct");
For (i=0 i<radio.length; i++) {
if (radio[i].checked) {
alert (radio[i].value)}
}}
Alert (radio[i].value) is used here for intuitive effects, and return Radio[i].value can be used for returning value values.
Take a closer look at the implementation of the GetValue method.
var document.getelementsbyname ("doorct");
Gets the collection of radio based on the Name property, Getelementsbyname method is one of the three methods that document obtains the object, and gets the collection.
followed by for (i=0;i<radio.length; i++) {Start traversal of the elements in the collection
if (radio[i].checked) {traverses each element, check that the checked property of the element is true, True, is selected, and returns its value Radio[i].value value.
METHOD2 Pass the current radio object value
If the radio button is only based on its value to make some page selection switch, it can be more convenient.
Bind one OnClick method to each single option, and give the method a value of this.
<body> <p> <label for= "DOORCT" >doors: <input type= "Radio" name= "DOORCT" Twodoor "onclick=" GetValue (This) ">two <input type=" Radio "name=" doorct "value=" Fourdoor "onclick=" GetValue (This) ">four </label> </p> </body>
This represents the current object, which is the current <input > Input button
After uploading to the method
function GetValue (obj) {
//Method 2
var value = Obj.value;
alert (value);
}
Just get the Value property directly.
See here, can be directly to the GetValue method to pass the selected value, of course, directly pass value value, one-step.
<body>
<p>
<label for= "DOORCT" >doors:
<input type= "Radio" name= "DOORCT" Twodoor "onclick=" GetValue (this.value) ">two <input type=" Radio "name=" DOORCT "value="
Fourdoor "onclick=" GetValue (this.value) ">four
</label>
</p>
</body>
<script>
function GetValue (value) {
//method2_1
alert (value);
}
</script> assigning values to radio
Assigning values to the radio button is similar to taking advantage of the radio checked property, which is the checked entry of the button item that will be assigned to true.
<body>
<p>
<label for= "DOORCT" >doors:
<input type= "Radio" name= "DOORCT" Twodoor "onclick=" GetValue (This) ">two <input type=" Radio "name="
doorct "value=" Fourdoor "onclick=" GetValue (This) ">four
</label>
</p>
</body>
<script>
function GetValue (obj) {
//Method 2
var value = Obj.value;
alert (value);
}
Window.onload = function () {
var radio = document.getelementsbyname ("doorct");
Radio[0].checked = true;
}
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
