Detect if Checkbox is Checked ~ Web Development Tools & Tech Info

In HTML checkbox is very commonly used tag because of its usefulness. Today's tutorial is about how to check if a checkbox checked or not. I will explain you here five different methods to shoot down this problem.

Create an HTML page name it check_detect.html and copy n paste below code in it.

check_detect.html

<!DOCTYPE html>
<html>
<head>
<title>Detect if Checkbox is checked</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});
</script>
</head>
<body>
<div class="main">
<table width="100%">
<tr>
<td>$("selector").is(':checked')</td>
<td>$("selector").prop('checked')</td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_me1"> 
Click on checkbox
</td>
<td>
<input type="checkbox" id="check_me2"> 
Click on checkbox
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td>$("selector").length</td>
<td>$("selector:checked").val()</td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_me3"> 
Click on checkbox
</td>
<td>
<input type="checkbox" id="check_me4"> 
Click on checkbox
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">document.getElementById('checkbox_id').checked</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="check_me5"> 
Click on checkbox
</td>
</tr>
</table>
</div>
</body>
</html>

CSS

Now let's unfold jQuery/Javascript code one by one.

$("selector").is(':checked')

$("#check_me1").on('click', function(){
if($("#check_me1").is(':checked')){
alert('Checkbox is checked');
}
else{
alert('Checkbox is unchecked');
}
});

Copy above code and and paste it in $(document).ready() function. Save check_detect.html and open it in browser. After loading the page click on the checkbox under $("selector").is(':checked') label.

Now you can see the effect.

Copy n paste other methods and see how their code work.

$("selector").prop('checked')

$("#check_me2").on('click', function(){
if($("#check_me2").prop('checked')){
alert('Checkbox is checked');
}
else{
alert('Checkbox is unchecked');
}
});

$("selector").length

$("#check_me3").on('click', function(){
if($("#check_me3:checked").length == 1){
alert('Checkbox is checked');
}
else{
alert('Checkbox is unchecked');
}
});

$("selector:checked").val()

$("#check_me4").on('click', function(){
if($("#check_me4:checked").val() == "on"){
alert('Checkbox is checked');
}
else{
alert('Checkbox is unchecked');
}
});

document.getElementById('checkbox_id').checked

$("#check_me5").on('click', function(){
if(document.getElementById('check_me5').checked == true){
alert('Checkbox is checked');
}
else{
alert('Checkbox is unchecked');
}
});