I see many peoples are confused how do i know currently which checkbox is checked. so I have created this post and share in our website. there are three way to check which checkbox is checked.

The three ways are as follows with an example.


<html>
        <head>
	    <title>How do i know currently which checkbox is check</title>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script>
		$(document).ready(function(){
			//checkbox name wise checked
			 $('input[name="chk1"]').click(function(){
				//checked
				var chk_color = $(this).val();
				var check = $(this).prop("checked");
				if(check) {
					 alert(chk_color+" Checkbox is checked.");
				} else {
					alert(chk_color+" Checkbox is unchecked.");
				}
			});
			
			// checkbox class name wise checkbox checked
			$('.chk2').click(function(){
				//checked
				var chk_color = $(this).val();
				var check = $(this).prop("checked");
				if(check) {
					 alert(chk_color+" Checkbox is checked.");
				} else {
					alert(chk_color+" Checkbox is unchecked.");
				}
			});	
			
		});
		
	   // functioin name wise checkbox checked
		function funchk3(value)
		{
			var check = $('.chk3').prop("checked");
			if(check) {
				 alert(value+" Checkbox is checked.");
			} else {
				alert(value+" Checkbox is unchecked.");
			}
		}
		</script>
	</head>
	<body>
		<div class="container">
			<h4 class="alert alert-success"><b>First Way:</b> "$('input[name="chk1"]')" checkbox Name wise check which checkbox is checked</h4>
			<input type="checkbox" name="chk1" id="chk1red" class="chk1" value="Red" />&nbsp;<label for="chk1red">Red</label><br>
			<input type="checkbox" name="chk1" id="chk1yellow" class="chk1" value="Yellow" />&nbsp;<label for="chk1yellow">Yellow</label> <br>
			<input type="checkbox" name="chk1" id="chk1black" class="chk1" value="Black" />&nbsp;<label for="chk1black">Black</label><br>
			<input type="checkbox" name="chk1" id="chk1white" class="chk1" value="White" />&nbsp;<label for="chk1white">White</label>
			
			<h4 class="alert alert-warning"><b>Second Way:</b> "$('.chk2')" checkbox Class name wise check which checkbox is checked</h4>
			<input type="checkbox" name="chk2" id="chk2red" class="chk2" value="Red" />&nbsp;<label for="chk2red">Red</label> <br>
			<input type="checkbox" name="chk2" id="chk2yellow" class="chk2" value="Yellow" />&nbsp;<label for="chk2yellow">Yellow</label> <br>
			<input type="checkbox" name="chk2" id="chk2black" class="chk2" value="Black" />&nbsp;<label for="chk2black">Black</label><br>
			<input type="checkbox" name="chk2" id="chk2white" class="chk2" value="White" />&nbsp;<label for="chk2white">White</label>
			
			<h4 class="alert alert-info"><b>Third Way:</b> "funchk3(this.value)" on click function name wise check which checkbox is checked</h4>
			<input type="checkbox" name="chk3" id="chk3red" class="chk3" value="Red" onclick="funchk3(this.value)" />&nbsp;<label for="chk3red">Red</label> <br>
			<input type="checkbox" name="chk3" id="chk3yellow"  class="chk3" value="Yellow" onclick="funchk3(this.value)" />&nbsp;<label for="chk3yellow">Yellow</label> <br>
			<input type="checkbox" name="chk3" id="chk3black"  class="chk3" value="Black" onclick="funchk3(this.value)" />&nbsp;<label for="chk3black">Black</label><br>
			<input type="checkbox" name="chk3" id="chk3white"  class="chk3" value="White" onclick="funchk3(this.value)"/>&nbsp;<label for="chk3white">White</label>
		</div>
	</body>
</html>

Connect With Facebook