如何知道Dart中是否选中了复选框或单选按钮？

Question

我有一个复选框和一个单选按钮组，我想知道是否勾选了复选框以及选择了哪个单选按钮。

如何做到这一点的镖？

Answer 1

比方说，我们有你的HTML像这样的东西：

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

你的镖代码来获得它们的值会像下面这样，我还添加了一个事件，知道被点击复选框时。

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

我发现this solution为单选按钮，在那里捕捉事件的“HTML” ......我已经使用这个解决方案到我的项目。

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

}