JSFiddle - React, Tailwind, and code Playground

by Inderpreet Singh Jolly

HTML

<form action="#">
    <div class="form-group">
        <div class="small">
            <input type="radio" name="sex" value="Male" class="required"> Male
        </div>
        <div class="small">
            <input type="radio" name="sex" value="Female" class="required"> Female
        </div>
    </div>
    <div class="form-group">
        <div class="small">
            <input type="radio" name="abc" value="text1" class="required"> text1
        </div>
        <div class="small">
            <input type="radio" name="abc" value="text2" class="required"> text2
        </div>
    </div>
    <input type="submit" value="Submit" class="registerBtn">
</form>

JavaScript

$(document).ready(function(){
     $('.registerBtn').on({
        click: function(evnt){

        	
        	$(".form-group").each(function(){
        		if($(this).find("input:radio:checked").length){
        			$(this).css({'background':'white'});
        			alert($(this).find("input:radio:checked").val());
        		}else{
        			$(this).css({'background':'red'});
        		}

        	});	
          evnt.preventDefault();
        }
   });
});