Jak sprawdzić, czy pole wyboru lub przycisk opcji jest zaznaczone w obszarze DART?

Question

Mam pole wyboru i grupę przycisków radiowych i chcę się dowiedzieć, czy pole wyboru jest zaznaczone i który przycisk opcji jest zaznaczony.

Jak to zrobić w rzutce?

Answer 1

Powiedzmy mamy kod HTML z mniej więcej tak:

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

Twój kod Dart w celu uzyskania ich wartości byłoby coś jak poniżej, ja również dodać zdarzenie wiedzieć, kiedy pole jest kliknięty .

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

znalazłem this solution dla przycisku radiowego, gdzie zdarzenie złapać przez „html” ... Użyłem tego roztworu do mojego projektu.

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

}