This write-up will describe the procedure to check and uncheck the checkbox using JavaScript.
How to Check/Uncheck the Checkbox Using JavaScript?
To check or uncheck the checkboxes in JavaScript, use the “checked” attribute. First, get the reference of the HTML element “checkbox” with the help of its assigned “id” using the “getElementById()” method, and then, apply the “checked” property on its value.
Example 1: Check/Uncheck the Single Checkbox
First, create an HTML file, with the following lines of code:
<input type="checkbox" id="checkbox"> Agree with terms and condition <br><br>
<button type="button" onclick="check()">Yes</button>
<button type="button" onclick="uncheck()">No</button>
In the above code:
- Create a checkbox, with the id “checkbox” that will be used to access the element “checkbox” to perform actions.
- Create two buttons, “Yes” and “No”, to check or uncheck the checkbox that will trigger the function “check()” and “uncheck()” respectively on the click event.
After executing the above code, the output will be like this:
Next, define the functions to perform actions on the checkbox in the JavaScript file or the tag. To check the checkbox, use the below lines of code:
let input = document.getElementById('checkbox');
input.checked = true;
}
In the above code:
- Define a function “check()” that will trigger the button click to check the checkbox.
- Inside the body of the function, get the reference of the checkbox using its id “checkbox” with the help of the “getElementById()” method and store it in a variable “input”.
- Check the checkbox by setting the “checked” property “true”.
To uncheck the checkbox by clicking the “No” button, use the below-given code:
let input = document.getElementById('checkbox');
input.checked = false;
}
The above code snippet:
- Define a function “uncheck()” that will trigger the button click to uncheck the checkbox.
- Inside the body of the function, get the reference of the checkbox using its id “checkbox” with the help of the “getElementById()” method and store it in a variable “input”.
- Uncheck the checkbox by setting the “checked” property “false”.
Lastly, define a function to uncheck the checkbox by default on the page load using the “window.onload” event:
window.addEventListener('load', check, false);
}
Output
The output signifies that the checkbox is checked and unchecked successfully while clicking on the buttons.
Example 2: Check/Uncheck Multiple Checkboxes
Let’s see an example of how to check or uncheck all the checkboxes at the same time.
First, create an HTML file, and then create multiple checkboxes and a button with the id “toggle” that will toggle the checkbox to check or uncheck:
<input type="checkbox" class="checkbox"> Check or uncheck me<br>
<input type="checkbox" class="checkbox"> Check or uncheck me<br>
<input type="checkbox" class="checkbox"> Check or uncheck me<br>
<input type="checkbox" class="checkbox"> Check or uncheck me<br>
<input type="checkbox" class="checkbox"> Check or uncheck me<br><br>
<input type="button" id="toggle" value="Click to toggle the checkboxes">
The corresponding output will be:
After that, in a JavaScript file or <script> tag, add the below code to check or uncheck the list of checkboxes with a single click. First, get the reference of the button by using its id “toggle” and store it in a variable “button” and then attach an onclick event and invoke a function “checkAllBoxes” that will check the list of checkboxes and then calls the next function “uncheckAllBoxes”:
button.onclick = checkAllBoxes;
To check the checkboxes, use the below-given code
var input = document.querySelectorAll('.checkbox');
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
this.onclick = uncheckAllBoxes;
}
In this above code:
- First, define a function “checkAllBoxes()” that will trigger on the button click to check all the checkboxes.
- Inside the body of the function, get the references of all checkboxes using their assigned classes “checkbox” with the help of the “querySelectorAll()” method and store it in a variable “input”.
- Iterate the checkboxes and set the “checked” property “true” to check all the checkboxes.
- After checking all checkboxes, call the other function “uncheckAllBoxes” on the click event to toggle the button.
To uncheck the list of the checkbox by clicking the button, use the below lines of code:
var input = document.querySelectorAll('.checkbox');
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
this.onclick = checkAllBoxes;
}
In this above code snippet:
- Define a function “uncheckAllBoxes()” that will trigger on the button click to uncheck all the checkboxes.
- Inside the body of the function, get the references of all checkboxes using their assigned classes “checkbox” with the help of the “querySelectorAll()” method and store it in a variable “input”.
- Iterate the checkboxes and set the “checked” property “false” to uncheck all the checkboxes.
- After that, call the other function “checkAllBoxes” on the click event to toggle the button.
Output
The output indicates that the list of checkboxes is successfully checked or unchecked with a single button.
Conclusion
To check or uncheck the checkboxes, use the “checked” property. After getting the reference of the element “checkbox” using its “id” with the help of the “getElementById()” method, check the checkbox by setting the “checked” attribute to “true”. Similarly, set the “checked” attribute to “false” to uncheck the checkbox. This write-up describes the procedure to check and uncheck the checkbox using JavaScript.
