How to get the value of a selected radio button using 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 theelement 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 -

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.

    
 
Choose The Course
 
  JAVA  HTML 
 Click 
    

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.

   
 Choose Value And Click Submit Button 
 Choose: Login In Sign Up 
  Submit  
 
   

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 ofquerySelector()-

querySelector(selectors)

Example

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

   
 
Choose The Gender:
 
  Male  Female  Others 
 Submit 
   

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!