Changing the values of a radio button programatically with jQuery

Question

I want to change the value of a radio button programatically on a website built on Spring, with jQuery on the frontend.

I've managed to change other values, but the radio button is kind of tricky.

Here's the HTML for the button:

<table id="formCheltuialaBuget:radioTVA" role="presentation" class="ui-selectoneradio ui-widget">
    <tbody>
        <tr>
            <td>
                <div class="ui-radiobutton ui-widget">
                    <div class="ui-helper-hidden-accessible"><input id="formCheltuialaBuget:radioTVA:0"
                            name="formCheltuialaBuget:radioTVA" type="radio" value="true"
                            onchange="PrimeFaces.ab({s:&quot;formCheltuialaBuget:radioTVA&quot;,e:&quot;change&quot;,p:&quot;formCheltuialaBuget:radioTVA&quot;,u:&quot;formCheltuialaBuget:tvaelig formCheltuialaBuget:totalELigg formCheltuialaBuget:publicBuget formCheltuialaBuget:tvanonelig formCheltuialaBuget:contributie&quot;,onst:function(cfg){document.body.style.cursor='wait';},onco:function(xhr,status,args){document.body.style.cursor='default';}});"
                            wtx-context="F08D1A11-AFD1-4F6C-80FC-F02488900FAB"></div>
                    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span
                            class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div>
                </div>
            </td>
            <td><label for="formCheltuialaBuget:radioTVA:0">Da</label></td>
            <td>
                <div class="ui-radiobutton ui-widget">
                    <div class="ui-helper-hidden-accessible"><input id="formCheltuialaBuget:radioTVA:1"
                            name="formCheltuialaBuget:radioTVA" type="radio" value="false"
                            onchange="PrimeFaces.ab({s:&quot;formCheltuialaBuget:radioTVA&quot;,e:&quot;change&quot;,p:&quot;formCheltuialaBuget:radioTVA&quot;,u:&quot;formCheltuialaBuget:tvaelig formCheltuialaBuget:totalELigg formCheltuialaBuget:publicBuget formCheltuialaBuget:tvanonelig formCheltuialaBuget:contributie&quot;,onst:function(cfg){document.body.style.cursor='wait';},onco:function(xhr,status,args){document.body.style.cursor='default';}});"
                            checked="checked" wtx-context="3412B572-AE39-4A78-B34C-87A13760C805"></div>
                    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active"><span
                            class="ui-radiobutton-icon ui-icon ui-icon-bullet ui-c"></span></div>
                </div>
            </td>
            <td><label for="formCheltuialaBuget:radioTVA:1">Nu</label></td>
        </tr>
    </tbody>
</table>

How can I change the value of the radio button to true/false?

Changing it this way:

document.getElementById("formCheltuialaBuget:radioTVA:0").value = false;
document.getElementById("formCheltuialaBuget:radioTVA:1").value = true;

didn't do it anything.

Thanks!

1) The code in the question is working absolutely fine, as you can see in this fiddle: jsfiddle.net/RoryMcCrossan/oypuj32m. 2) If the code isn't working for you, please add a working example displaying the issue. 3) Changing value of radio/checkbox inputs at runtime is a huge code smell, indicative that you're not doing something the way it should be done. 4) The amount of code in your onchange event handler is ridiculous and needs to be removed. Use unobtrusive event handlers instead. — Rory McCrossan
– Rory McCrossan, Commented Jan 23, 2022 at 18:17
It's not my webpage. I'm trying to input some data programatically, and for that I need to change the value in this radio button. But for some reason, it doesn't change. — Octavian Niculescu
– Octavian Niculescu, Commented Jan 23, 2022 at 18:24

Lajos Arpad · Accepted Answer · 2022-01-24 12:28:59Z

You will need to set the checked attribute instead, like

document.getElementById("formCheltuialaBuget:radioTVA:0").value = false;
document.getElementById("formCheltuialaBuget:radioTVA:1").value = true;

See

document.getElementById("formCheltuialaBuget:radioTVA:0").value = false;
document.getElementById("formCheltuialaBuget:radioTVA:1").value = true;

<table id="formCheltuialaBuget:radioTVA" role="presentation" class="ui-selectoneradio ui-widget">
    <tbody>
        <tr>
            <td>
                <div class="ui-radiobutton ui-widget">
                    <div class="ui-helper-hidden-accessible"><input id="formCheltuialaBuget:radioTVA:0"
                            name="formCheltuialaBuget:radioTVA" type="radio" value="true"
                            onchange="PrimeFaces.ab({s:&quot;formCheltuialaBuget:radioTVA&quot;,e:&quot;change&quot;,p:&quot;formCheltuialaBuget:radioTVA&quot;,u:&quot;formCheltuialaBuget:tvaelig formCheltuialaBuget:totalELigg formCheltuialaBuget:publicBuget formCheltuialaBuget:tvanonelig formCheltuialaBuget:contributie&quot;,onst:function(cfg){document.body.style.cursor='wait';},onco:function(xhr,status,args){document.body.style.cursor='default';}});"
                            wtx-context="F08D1A11-AFD1-4F6C-80FC-F02488900FAB"></div>
                    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span
                            class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div>
                </div>
            </td>
            <td><label for="formCheltuialaBuget:radioTVA:0">Da</label></td>
            <td>
                <div class="ui-radiobutton ui-widget">
                    <div class="ui-helper-hidden-accessible"><input id="formCheltuialaBuget:radioTVA:1"
                            name="formCheltuialaBuget:radioTVA" type="radio" value="false"
                            onchange="PrimeFaces.ab({s:&quot;formCheltuialaBuget:radioTVA&quot;,e:&quot;change&quot;,p:&quot;formCheltuialaBuget:radioTVA&quot;,u:&quot;formCheltuialaBuget:tvaelig formCheltuialaBuget:totalELigg formCheltuialaBuget:publicBuget formCheltuialaBuget:tvanonelig formCheltuialaBuget:contributie&quot;,onst:function(cfg){document.body.style.cursor='wait';},onco:function(xhr,status,args){document.body.style.cursor='default';}});"
                            checked="checked" wtx-context="3412B572-AE39-4A78-B34C-87A13760C805"></div>
                    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active"><span
                            class="ui-radiobutton-icon ui-icon ui-icon-bullet ui-c"></span></div>
                </div>
            </td>
            <td><label for="formCheltuialaBuget:radioTVA:1">Nu</label></td>
        </tr>
    </tbody>
</table>

Collectives™ on Stack Overflow

Changing the values of a radio button programatically with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related