make sure at least one radio button is checked before submission - php

Question

heres something that has bothered me for a while,i have several dynamically generated forms each with two radio buttons and a submit button,now the problem is that each time i submit a radio button selection,on click event is not fully consumed until another on change event happens,meaning that if the next form doesnt detect an onchange event on the radio buttons it uses the previous event
and produces a value(of the previous submitted radio button) even if no selection is made..
Check the code below,thanks
$(function(){
var pName;
var selectedValue;
var checked;
$(".sel1").on('change',function(){
$checked=$(this);
alert($checked.val());
});
$(".submit_btn").on('click',function(event){
event.preventDefault();
var $this=$(this);
var $cat_id=$this.data('uid');
alert($selectedValue);
$.ajax({
url:"vote.php",
method:"get",
data:"cat_id="+$cat_id+"&hisId="+$selectedValue,
success:function(result){
alert(result);
}
})
});
});
php code
<?php
}else{
?>
<div class="col-md-4 col-lg-4 col-sm-4 col-xsm-4 col-xxl-4 mt-4">
<div class="cat_holder">
<form action="" class="ml-4">
<div class="form-group">
<label for=".sel1" class="cat_name"><?php echo $catNames; ?></label><br>
<?php
foreach($player_id as $real_player_id){
$player_name=$caller->getPlayerNames($real_player_id);
?>
<input class="text_style sel1" type="radio" name="id" value="<?php echo $real_player_id;?>"> <?php echo $player_name;?><br>
<?php
}
?>
</select>
</div>
<div class="form-row">
<div class="col-md-6 col-lg-6 col-sm-6 col-xsm-6 col-xxl-6">
<input type="submit" value="Vote" class="btn btn-primary btn-block submit_btn" data-uid="<?php echo $realcatIds;?>">
</div>
</div>
</form>
</div>
</div>