JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>List 1</th>
      <th>List 2</th>
      <th>List 3</th>
      <th>List All</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list1Bulk" value="1" class="click-cr" id="R1"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list2Bulk" value="1" class="click-cr" id="R1"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list3Bulk" value="1" class="click-cr" id="R1"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="listAllBulk" value="1" class="click-cr" id="R1"><span class="br"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list1" value="1" class="click-cr" id="R2"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list2" value="1" class="click-cr" id="R2"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <label><input type="checkbox" name="list3" value="1" class="click-cr" id="R2"><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></label>
        </div>
      </td>
      <td>
        <div...

CSS

table {
  margin: 0;
  padding: 0;
}

table tr th{
  text-align: center;
}

.checkbox {
 width:20px;
 height: 20px;
  margin: 0 auto;
}

.checkbox > label {
  margin: 0;
  padding: 0;
  display: flex;
}

.checkbox > label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox > label > input[type="checkbox"] {
  display: none;
}

.checkbox > label > input[type="checkbox"]:disabled + .cr, .checkbox > label > input[type="checkbox"]:disabled + .br {
  opacity: 0.5;
}

.checkbox > label > span.cr, .checkbox > label > span.br {
  background: #FFF;
  border: 1px solid #a9a9a9;
  width: 20px;
  height: 20px;
  display: flex;
  cursor: pointer;
  margin: 0;
}

.checkbox > label > span.cr > .cr-icon, .checkbox > label > span.br > .cr-icon {
  font-size: 12px;
  margin: auto;
  color: #FFF;
  top: 0;
}

input[value="2"] + .cr > .cr-icon, input[type="checkbox"] + .cr > .cr-icon, input[type="checkbox"] + .br > .cr-icon {
  transform: scale(3) rotateZ(-20deg)!important;
  opacity: 0!important;
  transition: all .3s ease-in!important;
}

input[type="checkbox"]:checked + .cr > .cr-icon, input[type="checkbox"]:checked + .br > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

input[value="1"] + .cr {
  background: #FFF !important;
  border: 1px solid #a9a9a9 !important;
}

input[value="2"] + .cr {
  background: #c0e2e6 !important;
  border-color: #c0e2e6 !important;
}

input[value="5"] + .cr {
  background: #54c2c8!important;
  border-color: #54c2c8!important;
}

input[value="5"] + .br {
  background: #097FBE!important;
  border-color: #097FBE!important;
}

input[value="5"] + .cr > .cr-icon, input[value="5"] + .br > .cr-icon {
  transform: scale(1) rotateZ(0deg)!important;
  opacity: 1!important;
}

JavaScript

$( document ).ready(function() {	

  $('[type="checkbox"]').click(function(){
    var checkBox = $(this).attr('name');
    var checkVal = $(this).val();  

    if (checkBox == 'listAllBulk'){
      if (checkVal == 1){
        $('[type="checkbox"]').val(5);
      } else {
        $(this).val(1);
        $('[name="listAll"]').val(1);
      }       
    } else if(checkBox == 'list1Bulk') {
      if (checkVal == 1){
        $(this).val(2);
        $('[name="list1"]').val(2);
      } else if(checkVal == 2){
        $(this).val(5);
        $('[name="list1"]').val(5);
      } else {
        $(this).val(1);
        $('[name="list1"]').val(1);
      }
    } else if(checkBox == 'list2Bulk') {
      if (checkVal == 1){
        $(this).val(2);
        $('[name="list2"]').val(2);
      } else if(checkVal == 2){
        $(this).val(5);
        $('[name="list2"]').val(5);
      } else {
        $(this).val(1);
        $('[name="list2"]').val(1);
      }
    } else if(checkBox == 'list3Bulk') {
      if (checkVal == 1){
        $(this).val(2);
        $('[name="list3"]').val(2);
      } else if(checkVal == 2){
        $(this).val(5);
        $('[name="list3"]').val(5);
      } else {
        $(this).val(1);
        $('[name="list3"]').val(1);
      }
    } else if (checkBox == 'list1' || checkBox == 'list2' || checkBox == 'list3') {
      if(checkVal == 1){
        $(this).val(2);
      } else if (checkVal == 2){
        $(this).val(5);
      } else {
        $(this).val(1);
      }
    } else if(checkBox == 'listAll'){
      var checkId = $(this).attr('id');       
      if(checkVal == 1){
        $(this).val(5);        
      } else {
        $(this).val(1);
      }
      $('input[id="'+ checkId +'"]').each(function(){
        if(checkVal ==1){
          $(this).val(5);
        }
      });

    } 



    $.each(checkId, function(){     


    });
  });

});