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

Question

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

How to do it in a dart?

Answer 1

Let's say we have your HTML code 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 get your values ​​will be something like this: I also added an event to find out when the checkbox is checked.

 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 switch solution where the catch event is "html" ... I used this solution in 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; } }