如何使用dojo通过单击单选按钮显示/隐藏DIV？答案

【问题标题】：how to use dojo to show/hide DIV by clicking radio button?如何使用dojo通过单击单选按钮显示/隐藏DIV？
【发布时间】：2016-08-25 01:58:03
【问题描述】：

默认情况下，应选择“状态”并应出现“状态”下拉菜单。如果您选择区域单选按钮，则应出现区域下拉菜单。以下是标记。如何使用dojo来做到这一点？

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

【问题讨论】：

这里为什么不用简单的js呢？
我们尽量避免使用原生 JS 和其他库，并严格使用我从未使用过的 Dojo。

标签： html button dojo radio

【解决方案1】：

一个简单的 js 脚本就足够了，但是如果你想在 Dojo 中制作它，请参阅我的 jsFiddle：

如果您想添加其他输入，我已经在 html 中添加了一些数据属性以使其全局化

Solution in Dojo

dojo中的js代码：

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

【讨论】：