JSFiddle - React, Tailwind, and code Playground

by Mehmet Akif Petek

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>

CSS

label {
  display: block;
}

JavaScript

$(".chb").change(function(e) {

 //Getting status before unchecking all
  var status = $(this).prop("checked");

  $(".chb").prop('checked', false);
  $(this).prop('checked', true);

 //false means checkbox was checked and became unchecked on change event, so let it stay unchecked
  if (status === false) {
    $(this).prop('checked', false);
  }

});