JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<label for="male">First</label>
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1a]" value="yes">Yes
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1a]" value="no">No<br>

  <label for="male">Second</label>
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1b]" value="yes">Yes
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1b]" value="no">No<br>

  <label for="male">Third</label>
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1c]" value="yes">Yes
  <input class="myClass" type="checkbox" name="complianceFormMap[sec1c]" value="no">No<br>
<br><br>
  <button type="submit" value="Submit">Click</button>

JavaScript

$("button").click(function(){   
     var total = $('.myClass').length;
     var checked = $('input.myClass:checked').length * 2;
     var unChkdLen = (total - checked) / 2;
     if( unChkdLen == 0){
        alert("hi"); 
        return true;
     }else{
        alert("bye");  
        return false;        
     }
  });

  $(function () {           
     $('input[name^="complianceFormMap[sec"]').click(function(){
       var group = "input:checkbox[name='"+$(this).attr("name")+"']";
       $(group).prop('checked', false);
       $(this).prop("checked",true);
    }); 
  });