Demo of Reading id , status & Value of checkbox


One
Two
Three
Four
Five

Check and uncheck the checkboxes to show id, value and status of recently updated checkbox.


DEMO of managing group of checkboxes Limiting number of checkboxes user can select

JQuery

<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var id=$(this).attr('id');
var value=$(this).val();
var status= $(this).prop('checked');
$('#d1').html(" id : " + id + ", value : " + value + ", Status : " + status );
$("#d1").show();
setTimeout(function() { $("#d1").fadeOut('slow'); }, 3000);
});
/////
$('#d1').html("Details will be displayed here");
///
});
</script>

HTML

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

<button type='button' class='btn btn-secondary'  id=d1></button>