JSFiddle - React, Tailwind, and code Playground

by lakshmipriya001

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="checkboxes">
   <input type="checkbox" name="rGroup" value="1" id="r1" />
  <label class="a" for="r1">A </label>
  <input type="checkbox" name="rGroup" value="2" id="r2" />
  <label class="a" for="r2">B </label>
  <input type="checkbox" name="rGroup" value="3" id="r3" />
  <label class="a" for="r3">C</label>
</div>

CSS

.a{
   background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .a{
    border-top: 2px solid #39cd90;
  color: rgb(57, 205, 144);
  padding-top: 0px;
}

JavaScript

$(document).ready(function() {

var chk1 = $("#r1");
	var chk2 = $("#r2");
	
	chk2.on('change', function(){
		chk1.prop('checked',this.checked);
	});

  /*For getting values */
  $('.a').click(function() {
  debugger;
  if(!$(this).prev('input:checkbox[name=rGroup]').is(':checked')){
  	alert($(this).text()+"  checked");
  }else {
  	alert($(this).text()+"  Unchecked");
  }
   
  });
});