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

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?

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

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