how to get checked and unchecked checkbox value in jquery?

Today, We want to share with you how to get checked and unchecked checkbox value in jquery.In this post we will show you how to get all checked checkbox value in javascript, hear for checkbox check uncheck event javascript we will give you demo and example for implement.In this post, we will learn about Check Uncheck All Checkboxes using jQuery Selectors with an example.

How to Check a Checkbox is Checked or Not Using jQuery?

Example 1: index.html
How to check whether a checkbox is checked in jQuery?

<!DOCTYPE html> 
<html> 

<head> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
</head> 

<body> 
	<div style="width: 80px; 
			height: 80px; 
			padding: 10px; 
			border: 2px solid green;"> 
		
		<input type="checkbox"
			name="radio1"
			checked /> 
		<script> 
			$(document).ready(function() { 
				$("#but").click(function() { 
					if ($("input[type=checkbox]").prop( 
					":checked")) { 
						alert("Good Luck, Check box in Checked"); 
					} else { 
						alert("Check box is Unchecked"); 
					} 
				}); 
			}); 
		</script> 

		<br> 

		<button style="margin-top:10px"
				id="but"
				type="submit"> 
		Submit 
	</button> 
	</div> 
</body> 

</html> 

Using the jQuery prop() Method

Example 2: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check the Status of Checkboxes - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $("#output").html("Checkbox is checked.");
            }
            else if($(this).prop("checked") == false){
                $("#output").html("Checkbox is unchecked.");
            }
        });
    });
</script>
</head>
<body>
	<p><input type="checkbox"> Check or uncheck the checkbox to get the status.</p>
    <div id="output" style="background: yellow;"></div>
</body>
</html>

Using the jQuery :checked Selector

Example 3: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check the Status of Checkboxes - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).is(":checked")){
                $("#output").html("Your Checkbox is checked.");
            }
            else if($(this).is(":not(:checked)")){
                $("#output").html("Your Checkbox is unchecked.");
            }
        });
    });
</script>
</head>
<body>
    <p><input type="checkbox"> Check or uncheck the checkbox to get the status.</p>
    <div id="output" style="background: green;"></div>
</body>
</html>

I hope you get an idea about how to check multiple checkbox is checked or not in jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.