jquery

How to change the text of input with Jquery with 3.1.1.?


I want to change 2 text elements of input fields with jQuery 3.1.1. from Yes=> Up, No=>Down, but I got this not working with jQuery or Javascript. I honestly do need help.



<div id="mxui_widget_RadioButtonGroup_351" data-mendix-id="281_14" class="mx-name-radioButtons2 dd" focusindex="0" widgetid="mxui_widget_RadioButtonGroup_351" style="">
    <div>
        <label class="radio-inline">
            <input type="radio" name="1556006129938-1719" value="true">Yes</label>
        <label class="radio-inline">
            <input type="radio" name="1556006129938-1719" value="false">No</label>
    </div>
</div>

I tried several attempts and looked around 30 posts and tried the following but failed:


$('input.radio-inline')[0].html( "Omhoog" );

 $( "input:last" ).text( "Omhoog" );
/* $( "label" ).next().html('<input type="radio"  value="true">Omlaag</label>') */


/* $( "input[value='true']" ).text( "Hot Fasasauzz" );


$( "input[value='Hot Fuzz']" ).next().text( "Hot Fasasauzz" ); */

This is what I expect at the end:



<div id="mxui_widget_RadioButtonGroup_351" data-mendix-id="281_14" class="mx-name-radioButtons2 dd" focusindex="0" widgetid="mxui_widget_RadioButtonGroup_351" style="">
    <div>
        <label class="radio-inline">
            <input type="radio" name="1556006129938-1719" value="true">Up</label>
        <label class="radio-inline">
            <input type="radio" name="1556006129938-1719" value="false">Down</label>
    </div>
</div>


Solution

  • That's not the text of input, but of label element. You could loop through each of the label with class radio-inline and update the textContent, like:

    $('label[class="radio-inline"]').each(function() {
        var el = $(this).contents().last()[0],
        textContent = el.textContent;
        
        if(textContent === 'Yes') {
            el.textContent = 'Up';
        }
        else if(textContent === 'No') {
            el.textContent = 'Down';
        }
    });