JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="panel-body">
    <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
        <thead>
        <tr>
            <th>IO</th>
            <th>Signals</th>
                           
        </tr>
        </thead>
        <tbody>
        <tr class="odd gradeX">
            <td>1</td>
            <td>Ambient Temperature</td>
            <td><input type="checkbox" name="name1" checked /></td>
            <td><input type="checkbox" name="name1" checked /></td>
            <td><input type="checkbox" name="name1" checked /></td>
        </tr>
        <tr class="odd gradeX">
            <td>2</td>
            <td>Analog Input 1</td>
            <td><input type="checkbox" name="name2" /></td>
            <td><input type="checkbox" name="name2" /></td>
            <td><input type="checkbox" name="name2" /></td>
        </tr>
        <tr class="odd gradeX">
            <td>3</td>
            <td>Analog Input 2</td>
            <td><input type="checkbox" name="name3" /></td>
            <td><input type="checkbox" name="name3" /></td>
            <td><input type="checkbox" name="name3" /></td>
        </tr>
        <tr class="odd gradeX">
            <td>4</td>
            <td>Backup Battery</td>
            <td><input type="checkbox" name="name4" /></td>
            <td><input type="checkbox" name="name4" /></td>
            <td><input type="checkbox" name="name4" /></td>
        </tr>
        <tr class="odd gradeX">
            <td>5</td>
            <td>Main Power</td>
            <td><input type="checkbox" name="name5" /></td>
            <td><input type="checkbox" name="name5" /></td>
            <td><input type="checkbox" name="name5" /></td>
        </tr>

        </tbody>
    </table>
</div>
<button id="ckeckMyChkbxs">Click me to check</button>

JavaScript

var oldChkBxs;
function detect(){
  var chkBxs=[];
  $('input[type="checkbox"]').each(function(){   
    if(this.checked){
      chkBxs.push(true);
    }else{
      chkBxs.push(false);
    }
  });
  return chkBxs;
}
oldChkBxs=detect();
$('#ckeckMyChkbxs').on('click',function(){
  var newChk=detect();
  if(oldChkBxs.toString()===newChk.toString()){
    alert('OK Nothing Change');
  }else{
    alert('NOOO');
  }  
});