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

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

मैं रेडियो बटन, जहां पकड़ घटना "html" द्वारा ... मैं अपने प्रोजेक्ट में इस समाधान का इस्तेमाल किया है के लिए this solution पाया।

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

}