jQuery Checkbox Checked and Unchecked Example

jQuery Checkbox Checked and Unchecked Example

In this jQuery checked checkbox checked and unchecked tutorial. We will learn how to check a checkbox and how to uncheck a checkbox using the jQuery prop() function with example and live demo.

jQuery prop() Method – how to use this method on selected HTML elements. Here, you will learn the uses of the jQuery prop method. We can take an example of How to checked or unchecked a checkbox dynamically using jQuery prop method.

jQuery prop() Method

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

Syntax

$("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 of jQuery prop() method

You can see that example of the prop() method, the following example You can see that the uses of the prop() method to checked or unchecked a checkbox dynamically, on button click.

<!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>                            

Output

Check – Uncheck Checkbox Using prop

Note: Click the buttons to check or uncheck checkbox.

Here is checkbox

In this above jQuery prop method example,When you click on the check button that time checkbox checked and when you click unchecked button that time checkbox unchecked. This example is help you for dynamically checked or unchecked a checkbox using jquery prop method

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

Your email address will not be published. Required fields are marked *