search

Home  >  Article  >  Web Front-end  >  How to get the value of a selected radio button using JavaScript?

How to get the value of a selected radio button using JavaScript?

WBOY
WBOYforward
2023-08-30 22:29:021995browse

如何使用 JavaScript 获取选定单选按钮的值？

One of the most important HTML components when trying to design a form is the radio button. The user can only select one option from the options displayed by the radio button.

Usually, we just use the value attribute of the element in JavaScript to retrieve the value of the element from the HTML web page. But for radio buttons we can't do that. The reason is that getting the value of individual radio buttons is a bad idea.

Let’s start reading this article to know how to get the value of the selected radio button. For this we will use the checked attribute.

Use selected attribute

The properties checked are Boolean properties. If present, it indicates that the element should be pre-selected (checked) when the page loads. The Checked property can be used with checkbox and radio input types. Using JavaScript, the checked attribute can also be modified after the page has loaded.

grammar

The following is the syntax for checking properties -

<input checked>

Let's look at some examples to better understand how to get the value of the selected radio button

Example

In the example below, we run a script to get the value of the selected radio button. 

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ">
      <center>
         <div id="tutorial">
            <p>Choose The Course</p>
            <div>
               <input type="radio" id="java" name="course" value="java" />
               <label for="java">JAVA</label>
               <input type="radio" id="html" name="course" value="html" />
               <label for="html">HTML</label>
            </div>
            <button id="tutorial1">Click</button>
         </div>
      </center>
      <script>
         document.getElementById("tutorial1").onclick = function () {
            var radioButtonGroup = document.getElementsByName("course");
            var checkedRadio = Array.from(radioButtonGroup).find(
               (radio) => radio.checked
            );
            alert("The Selected Course Was : " + checkedRadio.value);
         };
      </script>
   </body>
</html>

When the script is executed, it will generate an output consisting of text as well as radio buttons and click buttons. When the user selects a radio button and clicks it, a popup displays the value you selected.

Example

Consider the following example where we run a script to get the value of a selected radio button. 

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D2B4DE;">
      <p>
         Choose Value And Click Submit Button
      </p>
      Choose:
      <input type="radio" name="Choose" value="LogIn">Login In
      <input type="radio" name="Choose" value="SignUp">Sign Up
      <br>
      <button type="button" onclick="getvalue()">
         Submit
      </button>
      <br>
      <div id="result"></div>
      <script>
         function getvalue() {
            var ele = document.getElementsByName('Choose');
            for(i = 0; i < ele.length; i++) {
               if(ele[i].checked)
               document.getElementById("result").innerHTML = "Choosen: "+ele[i].value;
            }
         }
      </script>
   </body>
</html>

When you run the above script, an output window will pop up, displaying text as well as radio buttons and submit buttons. When the user selects the radio button and clicks the submit button, the event is fired and displays the selected value.

Use querySelector() function

querySelector() The function returns the first element of the document that matches the given selector or set of selectors. If no match is found, Null is returned.

grammar

The following is the syntax of querySelector() -

querySelector(selectors)

Example

Execute the following code and observe how we get the value of the selected radio button. 

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D6EAF8 ;">
      <div id="tutorial">
         <p>Choose The Gender:</p>
         <div>
            <input type="radio" id="male" name="gender" value="Male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="Female">
            <label for="Female">Female</label>
            <input type="radio" id="others" name="gender" value="Others">
            <label for="Others">Others</label>
         </div>
         <button id="click">Submit</button>
      </div>
      <script>
         document.getElementById('click').onclick = function() {
            var selected = document.querySelector('input[type=radio][name=gender]:checked');
            alert(selected.value);
         }
      </script>
   </body>
</html>

When you run the script, it will generate an output consisting of text as well as radio buttons and submit buttons. When the user selects a value and clicks the button, a window pops up showing the selected value.

The above is the detailed content of How to get the value of a selected radio button using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html NULL 事件 选择器
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create an asynchronous function in TypeScript?Next article：How to create an asynchronous function in TypeScript?

Related articles

See more