JQuery Checkbox

Checkbox is a HTML form component and using this user can input data to system.

Reading the status of the checkbox

We will come to know the status of the checkbox checked or not. If it is checked then prop function will return true if not then we will get false. We will display the result in an alert window.

Using prop
<script>
   $(document).ready(function() {
      var ckb_status = $("#ckb").prop('checked');
alert(ckb_status);
 });
</script>
<input type=checkbox id='ckb'>
The above code will display one alert window at the time of page loading. Subsequently it will not show if we click or check the checkbox, this is because it is not connected to any change event.

Connecting checkbox to on Change event.

<script>$(document).ready(function() {
 $("#ckb").change(function(){
  var ckb_status = $("#ckb").prop('checked');
  alert(ckb_status);
});
});
</script>
<input type=checkbox id='ckb'>

Changing status to check or uncheck

So far we are reading the status of the checkboxes, now we will try to change the status of the checkbox. We will read one checkbox status and based on this we will set the status of another checkbox. If we check the first one then second one will automatically be checked and vice versa .
<script>$(document).ready(function() {
$("#ckb").change(function(){
 var ckb_status = $("#ckb").prop('checked');
if(ckb_status){$( "#ckb2" ).prop( "checked", true );}
else{$( "#ckb2" ).prop( "checked", false );}
	});
});
</script>
<input type=checkbox id='ckb'> 
<input type=checkbox id='ckb2'>

Enable or disable a checkbox

By clicking the 1st checkbox we can enable or disable the 2nd checkbox. For this we will use prop() function.
<script>
$(document).ready(function() {
$("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
if(ckb_status){$( "#ckb2" ).prop( "disabled", true );}
	else{$( "#ckb2" ).prop( "disabled", false );}
});
});
</script>
Click the first checkbox to enable / disable  the 2nd.<br><br>
1st <input type=checkbox id='ckb'> 
2nd <input type=checkbox id='ckb2'>

Reading checkbox id and value

In a page we have several checkboxes and wants to know which checkbox is clicked by user and what is its value. We will display the id and value of the checkbox which is clicked.
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
alert($(this).attr('id') + $(this).val());
});
});
</script>

Reading checkbox id , value and status

We will modify the above script and add the status of the checkbox to it. Instead of showing an alert we will display one message box for few seconds to display the clicked checkbox id, value and status. Note that status can be true or false

Here is the code.
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var id=$(this).attr('id');
var value=$(this).val();
var status= $(this).prop('checked'); // true or false 
$('#msg_display').html(" id : " + id + " value : " + value + " Status : " + status );
$("#msg_display").show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 1000);
});
});
</script>

All checkboxes of the page

We have several checkbox on a page, we want to collect value of the checkboxes which are checked.
<script>$(document).ready(function() {
 $('input[type="checkbox"]').change(function(){
 var str = '';

$.each($("input[type='checkbox']:checked"), function(){  
str = str + " " + ($(this).val());
});
$("#display").html("status of checkbox = " + str );
});

});
</script>
<input type=checkbox id='ckb1' value=One> One <br>
<input type=checkbox id='ckb2' value=Two> Two <br>
<input type=checkbox id='ckb3' value=Three> Three <br>
<input type=checkbox id='ckb4' value=Four class ='ckb'> Four <br>
<input type=checkbox id='ckb5' value=Five class ='ckb'> Five <br>
<div id="display"> </div>

All Checkboxes of perticular Class

In above code we want to collect values of checkboxes having class ='ckb' , then change the line saying $.each ....
$.each($(".ckb:checkbox:checked"), function(){
	.....
})

Showing total number of checkboxes clicked by user ( 5 )

<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var total_checked=  $("input[type='checkbox']:checked").length 
$("#display").html("Total Number of checkbox checked  = " + total_checked );
});
});
</script>
<input type=checkbox id='ckb1' value=One> One <br>
<input type=checkbox id='ckb2' value=Two> Two <br>
<input type=checkbox id='ckb3' value=Three> Three <br>
<input type=checkbox id='ckb4' value=Four> Four <br>
<input type=checkbox id='ckb5' value=Five> Five <br>
<div id="display"> </div>

Limiting the number of checkboxes checked by user. (6)

Let us say we can't allow users to select more than 2 checkboxes in a group. Once the user click the third checkbox we will uncheck that one and display a message saying you have reached maximum limit of checkbox you can select.
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var total_checked=  $("input[type='checkbox']:checked").length 
if(total_checked >=3 ){
$(this).prop("checked", false );
$("#display").html(" You have reached your maximum limit " );
} else {
$("#display").html("Total Number of checkbox checked  = " + total_checked );
}
});

});
</script>
<input type=checkbox id='ckb1' value=One> One <br>
<input type=checkbox id='ckb2' value=Two> Two <br>
<input type=checkbox id='ckb3' value=Three> Three <br>
<input type=checkbox id='ckb4' value=Four> Four <br>
<input type=checkbox id='ckb5' value=Five> Five <br>
<div id="display"> </div>

Controlling a group of checkbox from one single checkbox

We can check all or uncheck all a set of checkboxes from a single checkbox. User can have the option to further change the individual checkbox after using the common checkbox.
<script>
$(document).ready(function() {
$('#ckb5').change(function(){
var ckb_status = $("#ckb5").prop('checked');
$('input[type="checkbox"]').prop("checked", ckb_status );
});
});
</script>
<input type=checkbox id='ckb1' value=One> One <br>
<input type=checkbox id='ckb2' value=Two> Two <br>
<input type=checkbox id='ckb3' value=Three> Three <br>
<input type=checkbox id='ckb4' value=Four> Four <br><br>
<input type=checkbox id='ckb5' value=Five> Five <br>
<div id="display"> </div>

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+
felix

27-09-2017

Great tutorial

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer