AnsweredAssumed Answered

How to add a listener for a radio button

Question asked by stevel on Sep 13, 2016
Latest reply on Sep 14, 2016 by rscheitlin

I'm creating a widget which contains some radio buttons, and I need to figure out how to trigger the appropriate code when the radio button selection changes. Here's a simple mockup of the app:


Widget.html contains the radio buttons, which each have the class rdoButton:


    <input type="radio" id="rdoYes" class="rdoButton" name="radio1" value="yes" />Yes
    <input type="radio" id="rdoNo" class="rdoButton" name="radio1" value="no" />No


Within Widget.js I'm trying to set the listener at the class level, and also at the ID level, and trying the change and click events:


onChangeRadio: function() {
  console.log("change radio button")

_bindEvents: function() {

    lang.hitch(this, this._onChangeRadio)));

    lang.hitch(this, this._onChangeRadio)));


Clicking on the radio buttons doesn't fire the onChangeRadio function in either case. How can I set a listener for these radio buttons? Thanks


Edit: looking at the Scalebar widget, I'm trying to emulate the code used in its Settings section:

<div class="unit-item" data-dojo-attach-point="englishNode">
  <div data-dojo-type="jimu/dijit/RadioBtn" data-dojo-props="group:'sclebarUnit'"></div>
  <label class="jimu-leading-margin025">${nls.english}</label>

this.own(on(this.englishNode, 'click', lang.hitch(this, function() {
  this.set('selectUnit', 'english');


I can successfully trigger the Click function using this approach, but I can't see how to generate the radio buttons - only the labels show.