Programmatically change a radio button selection

Photoshop
1

Hello,

I have this html:

      <sp-radio-group class="radioGroup">
        <sp-radio  name="cropType" value="regular" checked>Regular</sp-radio>
        <sp-radio  name="cropType" value="edito">Edito</sp-radio>
        <sp-radio  name="cropType" value="display">Display</sp-radio>
      </sp-radio-group>

and i want to change the checked radio button to “Edito“

    const radioGroup = document.querySelector('.radioGroup');
    const radios = radioGroup.querySelectorAll('sp-radio');

    radioGroup.value = radios[1].getAttribute('value');
    radioGroup.dispatchEvent(new Event('change', { bubbles: true }));
    console.log("new value:", radioGroup.value);

radios[1].getAttribute(‘value’) = edito

but new value is still: regular

and the UI is not not updated (first radio button still checked)

Thank you for your help,

fred

2

IIRC you should add the checked attribute to the one you need (edito in this case). You can’t change the value of the group

3

Thank you Karmalakas for you answer. This works:

    const radioGroup = document.querySelector('.radioGroup');
    const radios = radioGroup.querySelectorAll('sp-radio');

    // loop through the radios and remove the checked attribute
    radios.forEach(radio => {
      radio.removeAttribute('checked');
    });

    radios[1].setAttribute('checked', 'true');