JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>                                                     
    <ul class="list-unstyled checkbox-list">
         <li>
            <label class="checkbox">
                <input id="ContentPlaceHolder1_ctl01_repGrid_chkItem_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01$repGrid$ctl01$chkItem" />
                <i></i>Select 1
                 </label>
        </li>
<li>
            <label class="checkbox">
                <input id="ContentPlaceHolder1_ctl01_repGrid_chkItem_1" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01$repGrid$ctl01$chkItem" />
                <i></i>Select 2
                 </label>
        </li>

    </ul>
    </td>

JavaScript

$(document).ready(function() {
  var $chkboxes = $('input[type=checkbox]:not(#checkAll)');

  $chkboxes.change(function(e) {
var lastChecked = $(this).is(":checked");
var ftime = $(this).attr("first-time");
    if (lastChecked && !ftime) {
      console.log("this checkbox checked for first time");
      $(this).attr("first-time",1);
      return;
    }
    if (e.shiftKey) {
      console.log("Shift held");
      var start = $chkboxes.index(this);
      var end = $chkboxes.index(lastChecked);
      $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
    }
    lastChecked = this;
  });

  $("#checkAll").click(function() {
    if ($("#checkAll").is(':checked')) {
      $("input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


});