jQuery Check Uncheck Checkbox

jQuery dynamically check uncheck checkbox; Through this tutorial, i am going to show you how to dynamically check and uncheck checkbox by id, class, name, and tag using jQuery prop() method.

jQuery Check Uncheck Checkbox

Use the jQuery prop() method to check uncheck checkbox by id, name, class and tag:

jQuery prop() Method
Syntax of jQuery prop() Method
Example for jquery checked uncheck checkbox by id

jQuery prop() Method

Using the jQuery prop () method can sets or returns the CSS properties of the selected html element.

Syntax of jQuery prop() Method

$("selector").prop(property);

You can also set the value of a single property.

$("selector").prop(property, newValue);

It can also be done via a function.

$("selector").prop(property, function(index, currentValue));

Example for jquery checked uncheck checkbox by id

See the following example for checked or unchecked a checkbox dynamically on button click using jQuery prop() method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check - Uncheck Checkbox Using prop</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
	.container{
    padding: 15px;
    background: #28BAA2;
    border: 1px solid #bead18;
}
</style> 
<script type="text/javascript">
$(document).ready(function(){
    $(".btn_check").click(function(){
        $("#checkVal").prop("checked", true);
    });
    $(".btn_uncheck").click(function(){
        $("#checkVal").prop("checked", false);
    });
});
</script>
</head>
<body>
	<div class="container">
	<p><b>Note:</b> Click the buttons to check or uncheck checkbox.</p> 
    <p><input type="checkbox" id="checkVal">Here is checkbox</p>
    <button type="button" class="btn_check">Checked</button>
    <button type="button" class="btn_uncheck">Unchecked</button>
	</div> 
</body>
</html>

Demo for jquery checked uncheck checkbox by id

Check – Uncheck Checkbox Using prop

Note: Click the buttons to check or uncheck checkbox.

Here is checkbox