JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<link rel="stylesheet" href="https://abpetkov.github.io/switchery/dist/switchery.min.css">
<script src="https://abpetkov.github.io/switchery/dist/switchery.min.js"></script>
<table>
<th>
	Attendance
</th>
    <tr>
        <td>presnent</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
				<td>absent</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
				<td>tardy</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
    </tr>
		   <tr>
        <td>presnent</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
				<td>absent</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
				<td>tardy</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
    </tr>
  
</table>

JavaScript

var animating = false;
    var masteranimate = false;

    $(function() {
            // Initialize multiple switches
            if (Array.prototype.forEach) {
                var elems = Array.prototype.slice.call(document.querySelectorAll('.switches'));
                elems.forEach(function(html) {
                    var switcherys = new Switchery(html);
                });
            }
            else {
                var elems = document.querySelectorAll('.switches');
                for (var i = 0; i < elems.length; i++) {
                    var switcherys = new Switchery(elems[i]);
                }
            }

           $('input.special').change( function(e){
                masteranimate = true;
                if (!animating){
                    var masterStatus = $(this).prop('checked');
                    $('input.chkChange').each(function(index){
                        var switchStatus = $('input.chkChange')[index].checked;
                        if(switchStatus != masterStatus){
                             $(this).trigger('click');
                        }
                    });
                }
                masteranimate = false;
           });
           $('input.chkChange').change(function(e){
               animating = true;
               if ( !masteranimate ){
                   if( !$('input.special').prop('checked') ){
                       $('input.special').trigger('click');
                   }
                   var goinoff = true;
                   $('input.chkChange').each(function(index){
                        if( $('input.chkChange')[index].checked ){
                            goinoff = false;
                        }
                   });
                   if(goinoff){
                      $('input.special').trigger('click');
                   }
               }
               animating = false;

           });

    });