JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<fieldset>
    <legend>Group1</legend>
       <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
       <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
       <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
  </fieldset>
<fieldset>
    <legend>Group2</legend>
       <input type="checkbox" class="radio" value="1" name="fooby[2][]" />
       <input type="checkbox" class="radio" value="1" name="fooby[2][]" />
       <input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>

CSS

fieldset{
    border:1px solid #aaa;
    margin:10px;
    padding:5px;
}

JavaScript

$("input:checkbox").change(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";    
    $(group).not(this).prop("checked",false);
    $(this).prop("checked",!this.checked);      
});