Sometimes we may want to check or uncheck a checkbox with JavaScript programmatically in our web apps.
In this article, we’ll look at how to check or uncheck a checkbox with JavaScript.
Set the checked Value of the Checkbox Element
One way to check or uncheck a checkbox with JavaScript is to set the checked property value of the HTML checkbox element.
For instance, we can write the following HTML:
<button id='check'>
check
</button>
<button id='uncheck'>
uncheck
</button>
<input type='checkbox' id='checkbox'>
Then we can write the following JavaScript to add click listeners to the check and uncheck buttons so we can check and uncheck the checkbox respectively:
const checkBtn = document.getElementById("check")
const uncheckBtn = document.getElementById("uncheck")
const checkbox = document.getElementById("checkbox")
checkBtn.addEventListener('click', () => {
checkbox.checked = true
})
uncheckBtn.addEventListener('click', () => {
checkbox.checked = false
})
In the first 3 lines, we get the elements with getElementById .
Then we call addEventListener with the 'click' string to add a click listener.
And then we pass in callbacks to set the checked property to true and false respectively.
true will check the box and false will uncheck it.
Click the Checkbox Element
Another way to toggle the checkbox is to click the checkbox input itself with the click method.
For instance, we can write the following HTML:
<button id='toggle'>
toggle
</button>
<input type='checkbox' id='checkbox'>
Then we can add a click listener to the toggle button to click the checkbox by writing:
const toggleBtn = document.getElementById("toggle")
const checkbox = document.getElementById("checkbox")
toggleBtn.addEventListener('click', () => {
checkbox.click()
})
We call the checkbox.click method to click the checkbox.
Set the checked Attribute with the setAttribute and removeAttribute Methods
We can add or remove the checked attribute with the setAttribute and removeAttrbute methods respectively.
For instance, if we have the following HTML:
<button id='check'>
check
</button>
<button id='uncheck'>
uncheck
</button>
<input type='checkbox' id='checkbox'>
Then we can add click listeners to the buttons to check and uncheck the checkbox by writing:
const checkBtn = document.getElementById("check")
const uncheckBtn = document.getElementById("uncheck")
const checkbox = document.getElementById("checkbox")
checkBtn.addEventListener('click', () => {
checkbox.setAttribute('checked', 'checked')
})
uncheckBtn.addEventListener('click', () => {
checkbox.removeAttribute('checked')
})
In the check button’s click listener, we call setAttribute to set the checked attribute to check the checkbox.
And in the uncheck button’s click listener, we call removeAttribute to remove the checked attribute to uncheck it.
Conclusion
To check or uncheck a checkbox with JavaScript, we can set the checked property of a checkbox.
ALso, we can call the click method to click the checkbox as if the user clicks it.
And we can also call setAttribute and removeAttribute to add and remove the checked attribute from the checkbox respectively.
