JavaScript Set Checkbox Checked
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript set checkbox checked, developers may construct dynamic and interactive websites using the flexible programming language JavaScript.
Checkbox manipulation is a typical activity in web development, and JavaScript offers a practical way to dynamically set the checked status of checkboxes.
Checkboxes are easily manipulated with JavaScript by accessing their properties and changing their states.
You can determine whether a checkbox is chosen or not by using the checked attribute.
Simply assign true to the checked attribute to make the checkbox ticked, and assign false to make it unchecked.
We'll talk about the concept of a javascript set checkbox checked now.
Step By Step Guide On JavaScript Set Checkbox Checked :-
<!DOCTYPE html>
<html>
<head>
<title>Set Checkbox Checked - JavaScript</title>
</head>
<body>
<h2>Checkbox Example</h2>
<form id="myForm">
<label>
<input type="checkbox" name="option1" value="Option 1" /> Option 1
</label>
<br />
<label>
<input type="checkbox" name="option2" value="Option 2" /> Option 2
</label>
<br />
<label>
<input type="checkbox" name="option3" value="Option 3" /> Option 3
</label>
</form>
<script>
// Get the form and checkboxes
const form = document.getElementById("myForm");
const checkboxes = form.querySelectorAll('input[type="checkbox"]');
// Set the checkbox as checked
function setCheckboxChecked(checkboxName, isChecked) {
checkboxes.forEach(function (checkbox) {
if (checkbox.name === checkboxName) {
checkbox.checked = isChecked;
}
});
}
// Usage: setCheckboxChecked(checkboxName, isChecked);
// Example: setCheckboxChecked("option2", true);
// Set the "Option 2" checkbox as checked
setCheckboxChecked("option2", true);
</script>
</body>
</html>
- In this example, a form of an HTML page has 3 checkboxes with the labels "Option 1," "Option 2," & "Option 3."
- We must first gain get entry to to the shape's checkboxes to be able to accomplish this.
- The form element with the ID "myForm" is retrieved using the document.GetElementById characteristic.
- The querySelectorAll function at the form is then used to pick each checkbox.
- By doing this, we're given a group of checkboxes to paintings with.
- The function setCheckboxChecked, which has the parameters checkboxName and isChecked, is defined after that.
- The forEach technique is used within this feature to again and again iterate through the checkboxes.
- We determine whether every checkbox's call corresponds to the checkboxName given.
- We set the checked assets of that checkbox to the fee of isChecked if there is a in match.
- In different phrases, the checkbox can be ticked if isChecked is true and unchecked if it is false.
- The desired checkbox name & a boolean price indicating whether it must be checked or no longer are passed to the setCheckboxChecked characteristic whilst using it.
- For instance, in this code, setCheckboxChecked("option2", true); is used to mark the "Option 2" checkbox as checked.
Conclusion :-
As a result, we were able to understand the idea of a javascript set checkbox selected.
Additionally, we discovered how useful it is to dynamically check checkboxes for tasks like form validation, default selections, & conditional content display.
JavaScript is a useful tool for dealing with checkboxes and creating interactive to web sites because of its adaptability and simplicity.
I hope this article on JavaScript set checkbox checked helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
