how to get all checked and unchecked multiple checkbox values in jquery

jQuery dynamically check uncheck checkbox; In this tutorial, you will learn how to get all check and uncheck multiple checkbox value using the jQuery prop() function.

how to get all checked and unchecked multiple checkbox value in jquery

You can get multiple checkboxes checked and unchecked using jQuery prop() and attr() jquery selectors

The jQuery prop() method can set or get the properties of the selected HTML checkbox values.

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 of jQuery dynamically check uncheck the checkbox

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>                            

Demo for jQuery dynamically check uncheck checkbox

Check – Uncheck Checkbox Using prop

Note: Click the buttons to check or uncheck checkbox.

Here is checkbox

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

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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