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 special1" id="special1" />
    </td>
    <td>absent</td>
    <td>
      <input type="checkbox" class="switches special2" id="special2" />
    </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]);
                }
            }

var changeCheckbox = document.querySelector('.special1')


changeCheckbox.onchange = function() {
  alert(changeCheckbox.checked);
};

var changeCheckbox2 = document.querySelector('.special2')


 changeCheckbox2.onchange = function() {
  alert(changeCheckbox2.checked);
	alert($(".special2").is(":checked"));
}; 
          

    });