Demo of using additional data attributes , status & Value of checkbox


ABC 1
ABC 2
ABC 3
ABC 4
ABC 5

Check and uncheck the checkboxes to show id, value and status along with additional data attributes like data-month_name & data-eqpt_id 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 name=$(this).attr('name');
var status= $(this).prop('checked');

var month_name=$(this).data('month_name');
var eqpt_id=$(this).data('eqpt_id');

$('#d1').html(" id : " + id + ", name : " + name + ", Status : " + status  +
  "<br> month_name :" + month_name + " eqpt_id: " + eqpt_id );
$("#d1").show();
setTimeout(function() { $("#d1").fadeOut('slow'); }, 3000);
});
/////
$('#d1').html("Details will be displayed here");
///
});
</script>

HTML

<input type=checkbox name=ckb1 id='abc1' data-month_name='jun' data-eqpt_id='abc691'> ABC 1 <br>
<input type=checkbox name=ckb2 id='abc2' data-month_name='july' data-eqpt_id='abc692'> ABC 2<br>
<input type=checkbox name=ckb3 id='abc3' data-month_name='Aug' data-eqpt_id='abc693'> ABC 3<br>
<input type=checkbox name=ckb4 id='abc4' data-month_name='Sep' data-eqpt_id='abc694'> ABC 4<br>
<input type=checkbox name=ckb4 id='abc5' data-month_name='Oct' data-eqpt_id='abc695'> ABC 5
<button type='button' class='btn btn-secondary'  id=d1></button>