Check a checkbox with JavaScript/jQuery
This post will discuss how to check (or uncheck) checkbox in JavaScript and jQuery.
1. Using jQuery
With jQuery, you can easily check or uncheck the checkbox using the .prop() method. To check the checkbox, set the checked property to true, and to uncheck the checkbox, set the checked property to false.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { $("#bike").prop('checked', true); $("#scooter").prop('checked', true); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter"> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="select">Select Two Wheelers</button> </div> </body> </html> |
You can also access the underlying HTMLInputElement and set its boolean checked property:
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { $("#bike")[0].checked = true; $("#scooter")[0].checked = true; }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter"> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="select">Select Two Wheelers</button> </div> </body> </html> |
Alternatively, you can simulate a mouse-click on a checkbox using jQuery’s click() method.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#select').click(function() { $("#bike").click(); $("#scooter").click(); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter"> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="select">Select Two Wheelers</button> </div> </body> </html> |
2. Using JavaScript
With pure JavaScript, you can use the checkbox’s checked property to set the checked state of a checkbox.
JS
|
1 2 3 4 |
document.getElementById('select').onclick = function() { document.getElementById("bike").checked = true; document.getElementById("scooter").checked = true; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter"> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="select">Select Two Wheelers</button> </div> </body> </html> |
Alternatively, you can trigger the “click” JavaScript event of checkbox using HTML DOM click() method.
JS
|
1 2 3 4 |
document.getElementById('select').onclick = function() { document.getElementById("bike").click(); document.getElementById("scooter").click(); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <body> <p>Choose your vehicle:</p> <div> <input type="checkbox" id="bike" name="vehicle" value="bike"> <label for="bike">Bike</label> </div> <div> <input type="checkbox" id="scooter" name="vehicle" value="scooter"> <label for="scooter">Scooter</label> </div> <div> <input type="checkbox" id="car" name="vehicle" value="car"> <label for="car">Car</label> </div> <div> <input type="checkbox" id="auto" name="vehicle" value="auto"> <label for="auto">Auto</label> </div> <div> <button id="select">Select Two Wheelers</button> </div> </body> </html> |
That’s all about checking a checkbox in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)