Explanation and examples about handling radio buttons in Javascript. We’ll explore the methods and properties of radio buttons, along with working examples.
The radio button (or radio button in English) is a form element that allows selecting an option and only one, on a set of possibilities. It can be seen below.
Note: At the top we can see three radio buttons instead of just one. Three buttons are placed because that way we can examine how it works when being part of a group. Let’s see that selecting an option deselects the option that was marked before.
HTML to generate radio buttons
Although in this article we are especially interested in working with radio buttons from Javascript, we want to clarify a couple of HTML rules for creating radio buttons.
- They are obtained with the tag.
- With the name attribute of the tag we assign them a name, which allows us to group the radio buttons.
- Having the same name means that only one option can be chosen among several, within that group of radio buttons.
- With the value attribute we indicate the value of each of the radio buttons.
- The checked attribute is used to indicate which of the radio buttons must be selected by default.
Radio objects in Javascript
Now we are going to give a small reference of what we can find in Javascript for each of the radio objects that the browser creates in the DOM. Through these properties and methods we can manipulate radio objects dynamically.
For now we leave this reference here, but later we will give you concrete and practical examples on how to manipulate radio buttons with Javascript.
Radius Object Properties
Let’s see a list of the properties of this element.
checked
Indicates whether or not a radio button is checked.
defaultChecked
Your default state.
value
The value of the radius field, assigned by the value property of the radius.
Length
(as a property of the spokes array)
The number of radio buttons that are part of the group. Accessible in the vector of spokes.
Methods of the radius object
They are the same as the ones he had.
Working with radio buttons and Javascript
In Javascript we access the elements of the page through the DOM, which is one that each of the HTML elements model, that is, the labels that a website has.
There are several ways to access DOM elements. In fact, as Javascript has evolved, more DOM access methods have been added, so there are a variety of ways to access radio buttons. In this article we are going to explain some of them, so that you do not have problems understanding one or the other working methods with radio buttons in Javascript.
Modern method of accessing the value of radio buttons with Javascript
We start by explaining the most modern method, which is also the most direct, of getting access to the radio buttons and knowing which one is checked.
We start by seeing how to access it using the querySelector method that allows access to a DOM object through a selector that we use in CSS.
Let’s start this HTML with a series of radio buttons:
The radio buttons all have the value name=”status”, therefore we can access the current value using this code:
activeValue = document.querySelector(‘input:checked’).value;
However, there is a problem with this, which is that an element may not be active, in which case the value of a null could not be accessed, since that would be a runtime error.
So, being a little more careful we could have code like this:
let activeItem = document.querySelector(‘input:checked’); if(activeItem) { alert(activeItem.value); } else { alert(‘There are no active elements’); }
Modern method to select a radio button with Javascript
Now let’s see how to set a certain option in a radio input field. For that we are going to use a modern method again, based on the querySelectorAll() method.
The problem or the difficulty of marking a certain option of the radio buttons is that we have several elements on the page, each one of which forms the group. Therefore, it is not simply accessing an object and marking it as checked, but we will have to go through the set of radio buttons to find the one that interests us and then check it.
To facilitate this work, we are going to present a function that is in charge of carrying out this process and you can reuse it wherever you need it.
function setRadio(name, value) { document.querySelectorAll(`input`).forEach(element => { if(element.value === value) { element.checked = true; } }); }
This function is responsible for receiving two parameters:
- The name of the buttons you want to set (the name attribute).
- The value of the radius input to mark as selected
In the body of the function we loop through the radio buttons, selecting the one that should be marked as active. To do this we simply modify the value of the checked property of the element that has the value (value) that must be checked.
For the record, I am going to leave the complete code of a page that uses these two mechanisms for accessing and manipulating radio buttons with Javascript.
Access to radio buttons with the traditional method based on the form object
Later in this article we are going to explain a more traditional method of accessing radio buttons, which was necessary before having the querySelector() and querySelectorAll() methods in Javascript. It will still work without any problem, you just have to take into account:
- The radio elements should be in a form.
- The form must have a name in order to refer to it.
When we have a set of radio buttons on a page, a radio object is created for each one of the buttons. The radio objects depend on the form and can be accessed by the form’s elements array (we’ll see how later), however an array with the radio buttons is also created. This array depends on the form and has the same name as the radio buttons.
Example of using the radio button with the traditional Javascript method based on the form object
Let’s see with an example the working method with the radio buttons in which we are going to place a bunch of them and each one will have a color associated with it. There will also be a button and pressing it will change the background color of the screen to the color that is selected in the set of radio buttons.
Let’s look at the whole page and then comment on it.
First we can look at the form and the list of radio buttons. They are all called "colorin", so they are associated in the same group. We also see that the value attribute of each button changes. We also see a button at the bottom.
With this form structure we will have an elements array of 9 elements, the 8 radio buttons and the button below.
In addition we will have an array of radio buttons that will be called bunting and depends on the form, accessible in this way.
document.form.colorin
This array has in each position one of the radio buttons. So in position 0 is the white button, in position 1 is the red one... To access these radio buttons we do it with their index.
document.fcolors.colorin
If we want to access, for example, the value property of the last radio button, we write the following.
document.fcolors.colorin.value
The length property of the radio array tells us the number of radio buttons that are part of the group.
document.fcolors.colorin.length
In this case, the length property will be worth 8.
With these notes we will be able to understand more or less well the function that is in charge of finding the selected radio button and changing the background color of the page.
Facebook Comments
Disqus