how to use dojo to show/hide DIV by clicking radio button?

Question

By default, State should be selected and State dropdown should appear. If you select Region radio button, Region dropdown should appear. Below are the markups. How to use dojo to do this?

<input type="radio" name="selection" value="state" checked> State
<input type="radio" name="selection" value="region" > Region
<div id="state">
    <select name="State">
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
  </select>
</div>
<div id="region">
    <select name="Region">
    <option value="se">South East</option>
    <option value="ne">Northern Central</option>
  </select>
</div>

Answer 1

A simple js script is sufficient , but if you want to made it in Dojo , see my jsFiddle :

I have add some data-attribute in html to make it global if you want to add other inputs

Solution in Dojo

js code in dojo :

require([
  'dojo/dom',
  'dojo/dom-construct',
  'dojo/dom-style',
  'dojo/query',
  'dojo/on',
  'dojo/domReady!'
], function (dom, domConstruct,domStyle,query,On) {

   domStyle.set(dom.byId('state'), "display", "block");
   domStyle.set(dom.byId('region'), "display", "none");

   On(query('.radio'),'change',function(){
    query('.combo').forEach(function(divElement){
        domStyle.set(divElement, "display", "none");
    });
    domStyle.set(dom.byId(this.dataset.target), "display", "block");
   });
});