checkbox - कैसे पता चलेगा कि क्या डार्ट में चेकबॉक्स या रेडियो बटन की जांच की जाती है?




radio-button dart (2)

मेरे पास एक चेकबॉक्स और एक रेडियो बटन समूह है और मैं जानना चाहता हूं कि चेकबॉक्स की जाँच की जाती है और कौन से रेडियो बटन का चयन किया जाता है

मैं डार्ट में यह कैसे करूँ?


मान लीजिए कि हमारे पास एचटीएमएल के साथ कुछ ऐसा है:

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

}

मुझे रेडियो बटन के लिए यह समाधान मिला है, जहां "एचटीएमएल" द्वारा घटना को पकड़ लिया गया है ... मैंने इस समाधान को अपनी परियोजना में इस्तेमाल किया है

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

}