<script>
$(document).ready(function() {
var ckb_status = $("#ckb").prop('checked');
alert(ckb_status);
});
</script>
<input type=checkbox id='ckb'>
DEMO: Reading checkbox status at the time of page loading
<script>$(document).ready(function() {
$("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
alert(ckb_status);
});
});
</script>
<input type=checkbox id='ckb'>
DEMO: On Change event of a checkbox
<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'>
DEMO: Changing status of checkbox by on Change event of another checkbox
<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');
})
DEMO: Additional Data attributes along with name, id and status of checkbox
<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'>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
alert($(this).attr('id') + $(this).val());
});
});
</script>
<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>
DEMO: ID value and status of clicked checkbox
<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>
$.each($(".ckb:checkbox:checked"), function(){ ..... })DEMO: Reading value of checkboxes selected by user
var total_checked= $(".ckb:checkbox:checked").length
If class is a variable ( here id is a variable )
var total_checked= $("."+id+":checkbox:checked").length
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
<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>
DEMO: Showing total number of selected checkboxes
<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>
DEMO: Restricting maximum number of checkboxes selected by user
<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>
DEMO: Managing a group of checkboxes from a single checkbox
felix | 27-09-2017 |
Great tutorial |
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |