How to know if a checkbox or radio button is checked in Dart?

Question

I have a checkbox and a radio button group and I want to know if the checkbox is checked and which radio button is selected.

How do I do this in dart?

Cartagena

can you add html code ? – Rhpositive

Answer 1

Let's say we have your HTML with something like this:

    <form >
      <input type="radio" name="gender" id="gender_male" value="male">Male<br>
      <input type="radio" name="gender" id="gender_female" value="female">Female
    </form>

    <form>
      <input type="checkbox" id="baconLover">I like bacon<br>
    </form>

Your Dart code to obtain their values would be something like the following, I also added an event to know when the checkbox is clicked.

import 'dart:html';

void main() {

  // Adds a click event when the checkbox is clicked
  query("#baconLover").on.click.add((MouseEvent evt) {
    InputElement baconCheckbox = evt.target;

    if (baconCheckbox.checked) {
      print("The user likes bacon");
    } else {
      print("The user does not like bacon");
    }

  });

  // Adds a click event for each radio button in the group with name "gender"
  queryAll('[name="gender"]').forEach((InputElement radioButton) {
    radioButton.onclick.listen((e) {
      InputElement clicked = e.target;
      print("The user is ${clicked.value}");
    });
  });

}

Cartagena

Does this break if the user navigates to the control with the tab key, then selects it using the space key? (Edit, surprisingly: No, it still works) – Foucquet

@Günter I had to change radioButton.on.click to radiobutton.onClick but there appears to be no add() method in the API. Also should InputElement be changed to RadioButtonInputElement? – Rentschler

Answer 2

I found this solution for radio button, where catch event by "html" ... I have used this solution into my project.

my_example.html

<polymer-element name="my-example">
  <template>
    <div on-change="{{updateRadios}}">
      Your favorite color is:
      <div>
        <label for="red">Red <input name="color" type="radio" id="red" value="red"></label>
      </div>
      <div>
        <label for="green">Green <input name="color" type="radio" id="green" value="green"></label>
      </div>
      <div>
        <label for="blue">Blue <input name="color" type="radio" id="blue" value="blue"></label>
      </div>
    </div>
    <div>
      You selected {{favoriteColor}}
    </div>
  </template>
  <script type="application/dart" src="my_example.dart"></script>
</polymer-element>

my_example.dart

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('my-example')
class MyExample extends PolymerElement {
  @observable String favoriteColor = '';

  MyExample.created() : super.created();

  void updateRadios(Event e, var detail, Node target) {
    favoriteColor = (e.target as InputElement).value;
  }

}

Rhpositive