
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to select a radio button by default in JavaScript?
Radio button
A radio button is used to select one among many options. This is one of the element in HTML. This radio button is a radio group to show a set of multiple choices, and in that only one can be selected. This way far similar to checkboxes, in checkboxes scenario’s we can select either one or many options as we can, whereas in radio button it can’t be done selecting multiple choices. We can define radio button is HTML using <input> tag.
Following is the syntax to define radio buttons in HTML
<input type="radio">
Example 1
None selected by default
In case we need to select a radio button by default, we need to check it as true. Whenever the radio buttons are checked as true, then it will be autofocused by default.
Considering the below example, we have three radio buttons and none of them are autofocused. After executing the script below, we get none selected as default because none of them are autofocused
<!DOCTYPE html> <html> <body> <input id="radio_1" value="1" type="radio" name="check"/>Male <input id="radio_2" value="2" type="radio" name="check"/>Female <input id="radio_3" value="3" type="radio" name="check"/>Not to mention </body> </html>
Example 2
Selecting a button
In this example, we'll choose the button and mark it as true, which will allow us to make that button the default.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Select a radio button by default</title> <input id="radioButton1" type="radio" name="check" />Hyderabad <input id="radioButton2" type="radio" name="check" />Delhi <input id="radioButton3" type="radio" name="check" />Mumbai </head> <body> <script> let radBtnDefault = document.getElementById("radioButton1"); radBtnDefault.checked = true; </script> </body> </html>
Example 3
In the below example, we have three radio buttons. At the initial stage we need to check the radio buttons to autofocus.
To perform that we need to get the id of the particular radio button which we want to assign the autofocus and we need to check it as true. After executing the script below, it will come with output as selecting the Minor radio button as default because we checked that button as true.
<!DOCTYPE html> <html> <body> <form id="radio_btn_form" name="form"> <input id="radio_1" value="1" type="radio" name="check"/>Minor <input id="radio_2" value="2" type="radio" name="check"/>Major <input id="radio_3" value="3" type="radio" name="check"/>senior citizen </form> <script> radiobutton = document.getElementById("radio_1"); radiobutton.checked = true; </script> </body> </html>
Example 4
Using the “default checked” property
The following example, It says that whether the radio button is clicked default or not. This can be done using ".defaultChecked" assigning to .getElementById. And the output will be shown in a Boolean value.
<!DOCTYPE html> <html> <body> <input type="radio" name="name" id="myRadio_1" checked> Radio Button-1 <p>Click on "Tap to check" button below know whether the radio button is by default checked.</p> <button onclick="func()">Tap to check!</button> <p id="para"></p> <script> function func() { var a = document.getElementById("myRadio_1").defaultChecked; document.getElementById("para").innerHTML = a; } </script> </body> </html>
After clicking "Tap to check" button, it will show whether the radio button is by default clicked or not.
- Related Articles
- How to select a radio button in a page in Selenium with python?
- Using Selenium in Python to click/select a radio button.
- How to uncheck a radio button using JavaScript/jQuery?
- How to check whether a radio button is selected with JavaScript?
- How to find a radio button element by value using Selenium?
- How to Get Value of Selected Radio Button Using JavaScript?
- How to use Radio button in Android?
- How to create a Radio Button using JavaFX?
- How can I send radio button value in PHP using JavaScript?
- How to use Radio Button in Android Kotlin?
- How to set OnclickListener on a radio button in android?
- How to change my code to uncheck radio button from JavaScript to jQuery?
- How to add radio button list in alert dialog?
- How to create radio button similar to the toggle button using Bootstrap
- Bootstrap Form Radio Button
