Dojo to show/hide DIVs which contains programmaticaly generated combo boxes - dojo

Question

I am a newbie to Dojo. Here is the issue i had. Pleas help.
When select State radio button, State combo box should appear. When select Region radio button, Region combo box should appear. But my codes seem not working.
Fiddle project is here
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/query',
'dojo/on',
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function (dom, domConstruct,domStyle,query,on, Memory, ComboBox) {
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"}
]
});
var regionStore = new Memory({
data: [
{name:"North Central", id:"NC"},
{name:"South West", id:"SW"}
]
});
var comboState = new ComboBox({
id: "stateSelect",
name: "state",
store: stateStore,
searchAttr: "name"
}, "state").startup();
var comboRegion = new ComboBox({
id: "regionSelect",
name: "region",
store: regionStore,
searchAttr: "name"
}, "region").startup();
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
on(query('.radio'),'change',function(){
query('.query').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
});
.hidden {
display: none;
}
<input class="radio" data-target="state" type="radio" name="selection" value="state">State
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region
<div id="state" class="query hidden"></div>
<div id="region" class="query hidden"></div>

Answer 1

It is more straightforward to query and then connect lke:
query('.radio').on('change', function(){
alert("bing")
})