CODEWITHSUNDEEP
htmlradio-buttondart
Nate Lockwood
Nate Lockwood

Reputation: 3675

Dart How to click or select a radio button programatically?

There are two circumstances in which I need to be able to click or change the selected radio button by software but I can't figure out how to do that.

One instance is when the user clicks on a button at the wrong time. I catch that but the button that was clicked now shows as checked so I need to change it back.

The other circumstance is when the user synchronizes the display with the primary database maintained elsewhere (in a separate Java application running concurrently) and there a discrepancy that needs to be corrected.

In my HTML document

      <div id='radio-btns' class='radio-btns'>
        <input id='B12' type='radio' name='radio-btn' checked>
          <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label>
        <input id='BWB' type='radio' name='radio-btn' >
          <label id='lblBBW' class='radiobutton-label' for='BWB'>Wide</label>
        <input id='B10' type='radio' name='radio-btn' >
          <label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
        <input id='B08' type='radio' name='radio-btn' >
          <label id='lblB8' class='radiobutton-label' for='B08'>B8&nbsp;</label>
      </div>

In the client Dart code:

querySelectorAll('input[type="radio"]').onClick.listen(bandBtnClicked);

// later on in onClick()
ButtonElement bandBtn = querySelector('#$correctBand');

bandBtn is not null but I don't know what to do with it to simulate a click. I think I would rather deselect the radio button incorrectly clicked and then select the radio button should be clicked. Nothing I've tried works.

[edit]This works!

ButtonInputElement bandBtn = querySelector('#$correctBand');
bandBtn.click();

Upvotes: 0

Views: 603

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

You can change the selected radio button like shown below. If you update your question to make it more clear I can probably provide a better solution (if this is not what you tried to accomplish).

html:

<div id='radio-btns' class='radio-btns'>
  <input id='B12' type='radio' name='radio-btn' checked>
    <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label>
  <input id='BWB' type='radio' name='radio-btn' >
    <label id='lblBBW' class='radiobutton-label' for='BWB'>Wide</label>
  <input id='B10' type='radio' name='radio-btn' >
    <label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
  <input id='B08' type='radio' name='radio-btn' >
    <label id='lblB8' class='radiobutton-label' for='B08'>B8&nbsp;</label>
</div>

<button>click me</button>

dart:

main () {
  dom.querySelectorAll('input[type="radio"]').onClick.listen(bandBtnClicked);
  dom.querySelectorAll('button').onClick.listen(bandBtnClicked);
}

void bandBtnClicked(event) {
  (dom.querySelector('#B08') as dom.RadioButtonInputElement).checked = true;
}

Upvotes: 1

Related Questions