JSFiddle - React, Tailwind, and code Playground

HTML

<div>First problem only use click on text</div>
<div class="radio_box"><input type="radio" name="test" value="1"/> Choose 1</div>
<div class="radio_box"><input type="radio" name="test" value="2"/> Choose 2</div>
<div class="radio_box"><input type="radio" name="test" value="3"/> Choose 3</div>
<br />
<div>Second problem only use click on text</div>
<div class="radio_box_2"><input type="radio" name="test2" value="1"/> Choose next 1</div>
<div class="radio_box_2"><input type="radio" name="test2" value="2"/> Choose next 2</div>
<div class="radio_box_2"><input type="radio" name="test2" value="3"/> Choose next 3</div>

CSS

div.radio_box{cursor: pointer;}
div.radio_box input[type=radio]{cursor: pointer;}

div.radio_box_2{cursor: pointer;}
div.radio_box_2 input[type=radio]{cursor: pointer;}

JavaScript

$('div.radio_box').click(function() {
    $(this).find('input:radio').attr('checked','true');
});

$('div.radio_box_2').click(function() {
    $('input:radio',this).attr('checked','true');
});