Javascript this radio button

Javascript this radio button

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник

How to Get the Selected Radio Button Value in JavaScript

A group of radio buttons in HTML allows the user to select only one option from multiple options. In this tutorial, we will learn how to create a group of HTML radio buttons and get which one is selected using JavaScript.

Creating a Group of Radio Buttons in HTML

In HTML radio buttons are grouped by a unique name attribute. If the radio input does not have the same name attribute it will be independently selectable. In the example below only one of the following radio buttons can be selected because they all have the name attribute of day :

label for="monday">Mondaylabel> input type="radio" name="day" id="monday"> label for="tuesday">Tuesdaylabel> input type="radio" name="day" id="tuesday"> label for="wednesday">Wednesdaylabel> input type="radio" name="day" id="wednesday"> 

How to Get the Selected Radio Button

Since we know a group of radio buttons is defined by a name attribute we can get them using the JavaScript document.getElementsByName() method, passing the name attribute inside the () (parenthesis) of the method.

This will return an object of elements. All we have to do is iterate through the object using a for of loop and check which one is selected using the JavaScript .checked method.

label for="monday">Mondaylabel> input type="radio" name="day" id="monday" value="1"> label for="tuesday">Tuesdaylabel> input type="radio" name="day" id="tuesday" value="2" checked="checked"> label for="wednesday">Wednesdaylabel> input type="radio" name="day" id="wednesday" value="3"> 

var days = document.getElementsByName('day'); for (let i of days)  if (i.checked)  console.log(i.id); > > 

The above example gets the ID of the radio button if it is checked. To get the value of a radio button use the value JavaScript property:

var days = document.getElementsByName('day'); for (let i of days)  if (i.checked)  console.log(i.value); > > 

Get the Selected Radio Button Without Iterating

It is possible to get the selected radio button without iterating by using the JavaScript document.querySelector() method.

label for="monday">Mondaylabel> input type="radio" name="day" id="monday" value="1"> label for="tuesday">Tuesdaylabel> input type="radio" name="day" id="tuesday" value="2" checked="checked"> label for="wednesday">Wednesdaylabel> input type="radio" name="day" id="wednesday" value="3"> 

var selected = document.querySelector('input[name="day"]:checked').id; console.log(selected); 

The above example gets the ID of the radio button that is checked. Alternatively, you could get its value like this:

var selected = document.querySelector('input[name="day"]:checked').value; console.log(selected); 

Conclusion

You now know two different ways of getting the selected radio button using JavaScript.

Источник

Javascript this radio button

Last updated: Jan 11, 2023
Reading time · 3 min

# Set a Radio button to Checked/Unchecked using JavaScript

To set a radio button to checked/unchecked, select the element and set its checked property to true or false , e.g. myRadio.checked = true .

When set to true , the radio button becomes checked and all other radio buttons with the same name attribute become unchecked.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="radio" id="yes" name="choose" value="yes" /> label for="yes">Yeslabel> input type="radio" id="no" name="choose" value="no" /> label for="no">Nolabel> input type="radio" id="maybe" name="choose" value="maybe" /> label for="maybe">Maybelabel> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const yesBtn = document.getElementById('yes'); // ✅ Set the radio button to checked yesBtn.checked = true; // ✅ Set the radio button to unchecked // yesBtn.checked = false; 

We selected the radio button using the document.getElementById method.

We then set the element’s checked property to true .

# Setting a radio button to unchecked

If you need to uncheck a specific radio button, set its checked property to false .

Copied! 
const yesBtn = document.getElementById('yes'); // ✅ Set radio button to checked yesBtn.checked = true; // ✅ Set radio button to unchecked yesBtn.checked = false; 

Note that checking a radio button automatically unchecks all other radio buttons with the same name attribute.

Copied! 
const yesBtn = document.getElementById('yes'); yesBtn.checked = true; const noBtn = document.getElementById('no'); noBtn.checked = true; 

We first checked the yes radio button, but when we checked the no button, the yes button got automatically unchecked.

# Setting a radio button to be checked by default

You can set a radio button to be checked by default by setting the checked property directly on the input field.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> input type="radio" checked id="yes" name="choose" value="yes" /> label for="yes">Yeslabel> input type="radio" id="no" name="choose" value="no" /> label for="no">Nolabel> input type="radio" id="maybe" name="choose" value="maybe" /> label for="maybe">Maybelabel> script src="index.js"> script> body> html> 

Note that if you don’t assign the same name attribute value to all of the radio input fields in the group, you will be able to check multiple radio buttons at the same time.

If this is the behavior your use case requires, you should use a checkbox instead of a radio button.

You might see examples online that use the setAttribute and removeAttribute methods to check and uncheck a radio button.

Copied! 
const yesBtn = document.getElementById('yes'); // ✅ Check the radio button yesBtn.setAttribute('checked', ''); // ✅ Uncheck the radio button // yesBtn.removeAttribute('checked'); 

This is also perfectly fine, however, there are a couple of things to keep in mind when using the setAttribute method.

The method takes the following 2 parameters:

1. name — the name of the attribute to be set.
2. value — the value to assign to the attribute.

If the attribute already exists on the element, the value is updated, otherwise, a new attribute is added with the specified name and value.

When setting the value of a boolean attribute, such as checked , we can specify any value for the attribute and it will work.

If a boolean attribute, such as checked , is not present, the value of the attribute is considered to be false .

When setting the checked attribute, we pass an empty string as the value for the attribute because it’s a best practice to set boolean attributes without a value.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник