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'>

Using custom data attributes for checkbox

If there are several checkboxes on page with different class, id, value and name, we can get details of clicked checkbox by using HTML5 data attributes. In this example we have used additional custom attribute ( allowed in HTML5 , name should start with string 'data-' )

HTML5 data-*
In addition to standard attributes we used additional data attributes as per the format given in HTML5.
<input type=checkbox name=ckb id='abc' data-month_name='jun' data-eqpt_id='abc691'>
How to collect the data attributes
$('input[type="checkbox"]').change(function(){
var id=$(this).attr('id');
var name=$(this).attr('name');
var status= $(this).prop('checked');
// data attributes ///
var month_name=$(this).data('month_name');
var eqpt_id=$(this).data('eqpt_id');
})

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(){
	.....
})

All checkbox of a perticular Class checked ( total number)

var total_checked=  $(".ckb:checkbox:checked").length
If class is a variable ( here id is a variable )
var total_checked=  $("."+id+":checkbox:checked").length

All checkbox of a data attribute checked ( total number)

var total_checked=  $(":checkbox:checked[data-id=my_id]").length
if data attribute value is a variable ( here id is a variable )
var total_checked=  $(":checkbox:checked[data-id="+id+"]").length

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>

Validating Checkbox

Submit the form if checkbox is checked or show error message.

Checkboxradio JQuery UI

We can enhance these buttons by adding effects , user interactions and styles by using Checkboxradio UI.
Visitors Rating
Your Rating




felix

27-09-2017

Great tutorial

Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer