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

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


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}");    });  });}


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;  }}