Search code examples
javascripthtmljquerywordpressradio-button

How do I change the text on a checked radio button element while resetting the text of the other two?

I'm getting stuck on this, I have this radio button with 3 elements

<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1"  required />29 x 1</p>
<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2</p>
<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

now, I wanna make it so that when I check the first one, its text changes, and when I select the second one, the first text goes back to the original and the second text changes. I tried with this

function labelChanger3(){
    if (jQuery('#radio11').prop("checked", true)){
        jQuery('#radio11l').html('<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1" required />29 x 1 is ON</p>');
        jQuery('#radio12l').html('<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2 is OFF</p>');
        jQuery('#radio13l').html('<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3"/>25 x 3 is OFF</p>');

    }
}

jQuery("#radio11").change(function (){
    labelChanger3();
});

And it works for the first step. So I created corresponding functions for the other 2 elements, radio12 and radio13, with their respective .change functions. But it doesn't work. If I select for example radio12, the text changes accordingly, but when I go to select radio11 or radio13 the text stays the same. I don't understand what I should do in this case. Should I just use normal buttons at this point, that de-select each other manually when one is selected?

Solution

    • You can add <span> to the HTML to toggle the ON/OFF text.. To be like 29 x 1 IS <span>OFF</span>

    • Also no need to duplicate/repeat the code for each input you can use only one change handler for all of them

    $(document).ready(function(){
  $('input[name="delivery_option"]').on('change' , function(){
    $(this).next('span').text(this.checked ? 'ON' : 'OFF');  // toggle on off
    $('input[name="delivery_option"]').not(this).next('span').text('OFF');  // OFF other inputs
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1"  required />29 x 1 IS <span>OFF</span></p>
<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2 IS <span>OFF</span></p>
<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3" />25 x 3 IS <span>OFF</span></p>