Set a radio button to checked/unchecked in JavaScript is an important task when you want to build UI and manipulate user input. So how to do it? Let’s go into detail now.
Methods to set a radio button to checked/unchecked in Javascript
Use input radio checked property
Javascript provided for us property call checked to handle radio checked. If it is set to true, radio input will be checked. If set to false, radio input will be unchecked.
Syntax:
radioObj.checked = true|false
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>LearnShareIT</title>
</head>
<body style="text-align:center; min-height: 100vh;">
<h1>Hello From Learn Share IT</h1>
<input type="radio" class="radioBtn1" checked="true">Radio Input</input>
<p></p>
<button style="padding:10px; background-color: #74992e; border: none;" onClick="handleClick()">Click Me</button>
<script>
const radioBtn = document.querySelector('.radioBtn1')
console.log(radioBtn)
const handleClick =()=>{
radioBtn.checked = false
}
</script>
</body>
</html>Output:
Before click:
After click:
Here I create a handleClick function. When I click on the Click Me button, the checked property of radio input will be set to false then radio input will be unchecked. You can apply the checked property to make a loop radio input check.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>LearnShareIT</title>
</head>
<body style="text-align:center; min-height: 100vh;">
<h1>Hello From Learn Share IT</h1>
<input type="radio" onclick="handleClick()" class="radioBtn1" checked="true">Radio Input</input>
<p></p>
<button style="padding:10px; background-color: #74992e; border: none;" onClick="handleClick()">Click Me</button>
<script>
const radioBtn = document.querySelector('.radioBtn1')
console.log(radioBtn)
let radioValue = true
const handleClick =()=>{
radioValue = !radioValue
radioBtn.checked = radioValue
}
</script>
</body>
</html>Output:
With multiple radio input button
Suppose we have many radio inputs and set a similar name for them. In that case, we will have a mechanism that we can only have one radio input that is checked once, so we can make unchecked radio input by checking another radio input.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>LearnShareIT</title>
</head>
<body style="text-align:center; min-height: 100vh;">
<h1>Hello From Learn Share IT</h1>
<input type="radio" class="radioBtn1" name="foods">Breads</input>
<input type="radio" class="radioBtn2" name="foods">Milk</input>
<input type="radio" class="radioBtn3" name="foods">Yogurt</input>
<input type="radio" class="radioBtn4" name="foods">Potato</input>
<input type="radio" class="radioBtn5" name="foods">Meats</input>
<input type="radio" class="radioBtn6" name="foods">Sausage</input>
<script>
</script>
</body>
</html>Output:
As you see, I set all radio inputs to the same name, and every time I click on another radio input, the previous clicked radio input will be unclicked.
Summary
In this article, I showed you how to set a radio button to checked/unchecked in Javascript. You can use the checked property if you are working with a few radio inputs and want to add some conditional. Or, if you are working with many radio inputs, you can set all of them to the same name.
Maybe you are interested:
- AddEventListener To The Results From querySelectorAll Using JavaScript
- How To Get The Text Of A Div Element Using JavaScript
- Set the “required” Attribute using JavaScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm