How to check a radio button using JavaScript?A radio button is an icon that is used in forms to take input from the user. It allows the users to choose one value from the group of radio buttons. Radio buttons are basically used for the single selection from multiple ones, which is mostly used in GUI forms. You can mark/check only one radio button between two or more radio buttons. In this chapter, we will guide you on how to check a radio button using the JavaScript programming language. For this, first we design a form containing radio buttons using HTML, and then we will use JavaScript programming to check the radio button. We will also check which radio button value is selected. Create a radio buttonFollowing is a simple code for creating a group of radio buttons. Copy Code Check a radio buttonWe do not need to write any specific code to check the radio button. They can be checked once they are created or specified in HTML form. However, we have to write the JavaScript code to get the value of the checked radio button, which we will see in the chapter below: Check the radio button is selected or notThere are two ways in JavaScript to check the marked radio button or to identify which radio button is selected. JavaScript offers two DOM methods for this.
The input radio checked property is used to check whether the checkbox is selected or not. Use document.getElementById('id').checked method for this. It will return the checked status of the radio button as a Boolean value. It can be either true or false. True - If radio button is selected. False - If radio button is not selected/ checked. See the JavaScript code below to know how it works: ExampleFor example, we have a radio button named Summer and id = 'summer'. Now, we will check using this button id that the radio button is marked or not. Copy Code querySelector()The querySelector() function is a DOM method of JavaScript. It uses the common name property of radio buttons inside it. This method is used as given below to check which radio button is selected. ExampleFor example, we have a group of radio buttons having the name property name = 'season' for all buttons. Now, between these buttons named season we will check which one is selected. Copy Code Get the value of checked radio button:Using getElementById ()Following is the code to get the value of checked radio button using getElementById() method: Copy Code Using querySelector()Following is the code to get the value of checked radio button using querySelector() method: Copy Code Full code to get selected radio button valueIn this example, we will put all the above code together to create and check a radio button. After that we will also fetch the value of the selected radio button. Copy Code Output When you will execute the above code, it will run on the web and give the output as given below: Choose one of the radio buttons and click on the Submit button and get the selected value. In case you do not choose any of the seasons and directly click on the Submit button, it will show you an error message that - You have not selected any season because we have used the validation. Get the value of selected radio button: querySelector()DOM querySelector() methodThe querySelector() function is a DOM method of JavaScript. This method is used to get the element that matches with the specified CSS selector in the document. Remember you need to specify the name property of the radio button in HTML code. It is used as document.querySelector('input[name="JTP"]:checked') inside the tab to check the selected radio button value from the group of radio buttons. It minimizes the length of the code by getting the value of the selected radio button using a small line of code. See the code below how it will use with HTML form: Copy Code |