JSFiddle - React, Tailwind, and code Playground

by Swapnil Khamkar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<form>
    <pre>Group A</pre>
    <input class='group-a' data-name='Group A' type='checkbox' value='1' /> 1
    <input class='group-a' data-name='Group A' type='checkbox' value='2' /> 2
    <pre>Group B</pre>
    <input class='group-b' data-name='Group B' type='checkbox' value='1' /> 1
    <input class='group-b' data-name='Group B' type='checkbox' value='2' /> 2
    <pre>Group C</pre>
    <input class='group-c' data-name='Group C' type='checkbox' value='1' /> 1
    <input class='group-c' data-name='Group C' type='checkbox' value='2' /> 2
    <hr />
    <input type='button' id="submitBtn" value="Submit"/>
  </form>

JavaScript

$("#submitBtn").click(function(){
	
  if ( $(".group-a:checked").length == 0 ) {
  	alert("Select atleast one from Group A");
    return false;
  }
  
  if ( $(".group-b:checked").length == 0 ){
  	alert("Select atleast one from Group B");
    return false;
  }
  if ( $(".group-c:checked").length == 0 ){
  	alert("Select atleast one from Group C");
    return false;
  }
});