Today, We will let you know how to check & uncheck a checkbox with jQuery in this article. I see many peoples are confused about How to Check a Checkbox is Checked or Not using jquery. so I have created this article and share in our website. there is a three-way to check which checkbox is checked.
The three ways are as follows with an example.
checkbox name wise checked value
$('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 value
$('.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.");
}
});
function name wise checkbox checked value
function funchk3(value)
{
var check = $('.chk3').prop("checked");
if(check) {
alert(value+" Checkbox is checked.");
} else {
alert(value+" Checkbox is unchecked.");
}
}
Now, you can see our full 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.");
}
});
});
// function 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" /> <label for="chk1red">Red</label><br>
<input type="checkbox" name="chk1" id="chk1yellow" class="chk1" value="Yellow" /> <label for="chk1yellow">Yellow</label> <br>
<input type="checkbox" name="chk1" id="chk1black" class="chk1" value="Black" /> <label for="chk1black">Black</label><br>
<input type="checkbox" name="chk1" id="chk1white" class="chk1" value="White" /> <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" /> <label for="chk2red">Red</label> <br>
<input type="checkbox" name="chk2" id="chk2yellow" class="chk2" value="Yellow" /> <label for="chk2yellow">Yellow</label> <br>
<input type="checkbox" name="chk2" id="chk2black" class="chk2" value="Black" /> <label for="chk2black">Black</label><br>
<input type="checkbox" name="chk2" id="chk2white" class="chk2" value="White" /> <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)" /> <label for="chk3red">Red</label> <br>
<input type="checkbox" name="chk3" id="chk3yellow" class="chk3" value="Yellow" onclick="funchk3(this.value)" /> <label for="chk3yellow">Yellow</label> <br>
<input type="checkbox" name="chk3" id="chk3black" class="chk3" value="Black" onclick="funchk3(this.value)" /> <label for="chk3black">Black</label><br>
<input type="checkbox" name="chk3" id="chk3white" class="chk3" value="White" onclick="funchk3(this.value)"/> <label for="chk3white">White</label>
</div>
</body>
</html>
Please follow and like us:
