Home > Developer > JavaScript
Radio is a very common form element in form forms, and for radio operations, all of the radio's checked properties are used for radio properties. When you get the selected value of radio, traverse the radio button item, locate the button that is selected (checked), and return its value, and when assigning a value to radio, locate the corresponding button item and set its Checked property to true.
If we are given a page
<body> <p> <label for= "DOORCT" >doors: <input type= "Radio" name= "DOORCT" value= " 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 to take it?
1 Gets the collection of the radio by the Name property
2 iterating through each item element in the collection
3 Gets the element's checked property, 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");
Based on the Name property, gets the collection of radio, the Getelementsbyname method is one of the three methods that document gets the object, and gets to the collection.
Immediately after for (i=0;i<radio.length; i++) { The element in the collection begins to traverse
if (radio[i].checked) { iterates through each element, checks whether the element's checked property is True, is true, is selected, and returns its value radio[i].value value.
It can be more convenient if the radio button only makes some page selection changes based on its value.
To bind an OnClick method to each single option, pass the value of this to the method.
<body><p><label for= "DOORCT" >doors: <input type= "Radio" name= "DOORCT" value= "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 = obj.value;alert (value);}you can get the Value property directly.
See here, can you directly to the GetValue method to pass the selected value values, of course, pass value value directly, one step.
<body><p><label for= "DOORCT" >doors: <input type= "Radio" name= "DOORCT" value= "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_1alert (value );} </script> Assigning values to the radio button is similar to the value of the radio, which is to set the checked key of the button entry to True, using the Checked property of the value.
<body><p><label for= "DOORCT" >doors: <input type= "Radio" name= "DOORCT" value= "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;}JavaScript get radio selected values in form
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
