JQury Reading and assigning status values and attributes of checkbox

Показать описание

2:30 Change event of Checkbox.

Checkbox can take status as checked or not checked, usually checkbox are used when more than one selection can be done by the user. For example the programming languages a candidate know or indoor games we can play.
Reading status at the time of page load
Without associating with any event we can read the status of the checkbox
var ckb_status = $("#ckb").prop('checked');
This status we can display as message using alert window or in a message area.

Change in status of checkbox
We can trigger events by using change event of checkbox. When the status is changed then we will read the status of the checkbox and display them in a message area.
$("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
alert(ckb_status);
});
Assigning status to a checkbox
Based on change in status of one checkbox we will change the status of another checkbox. If we check the first one then second one will automatically be checked and vice versa .
$("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
if(ckb_status){$( "#ckb2" ).prop( "checked", true );}
else{$( "#ckb2" ).prop( "checked", false );}
});

Reading id, value , status and other attributes of the checkbox
var ckb_status = $("#ckb").prop('checked');
var ckb_value = $("#ckb").val();
//alert(ckb_status);
var id=$(this).attr('id');
var value=$(this).val();
var status= $(this).prop('checked');

$('#display').html("status" + ckb_status + );

If we have several checkboxes in a page and wants to know which are checked or selected by user then we can use this code.
$('input[type="checkbox"]').change(function(){
var str = '';
$.each($("input[type='checkbox']:checked"), function(){
str = str + " " + ($(this).val());
});
$("#display").html("status of checkbox = " + str );
});
WE can restrict this to particular group of checkbox by using the style property associated with this. One group of checkbox will have one common style property.
$.each($(".ckb:checkbox:checked"),function(){
str=str + " " + ($(this).val());
});
Enable disable checkbox
WE can enable or disable one checkbox by using another checkbox. $("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
if(ckb_status){$( "#ckb2" ).prop( "disabled", true );}
else{$( "#ckb2" ).prop( "disabled", false );}
});
});