JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val2"><p class="one">one 1</p><p class="ones">one 2</p><p class="oness">one 3</p></div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div name="deff" id="val4" >
<input type="radio" name="user_options" value="675" />
</div>
<input class="text-input" id="other-input" size="5" value="">
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
JavaScript
$("#radio_submit").click(function (e) {
var checked_option_radio = $(this).closest('form').find('div').hasClass('selected');
if(checked_option_radio) {
var check_div = $('.selected').next().is('div');
var check_input = $('.selected').next().is('input');
var div_value = $('.selected').next('.deff').$(".one").text();
var input_value = $('.selected').next('input').val();
if(check_div){
$('#valueee').html(div_value);
}
if(check_input){
$('#valueee').html(input_value);
}
} else {
alert('nothing selected');
var hello2 = "no radio button is selected"
$('#valueee').html(hello2);
}
});
$('input').on('click',function(){
if (!$("input").is(':checked')) {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
else {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
});