通过点击单选按钮实现某个模块的显示和隐藏

通过点击单选按钮实现某个模块的显示和隐藏

最近在项目中有个需求，应用在文章发布里面，要求新增发布文章的时候，发布方式二选一，要么是以一个URL来发布文章内容，要么自己编辑文章内容。

当我选择URL发布时会弹出相应编辑框：

当我选择编辑发布时会显示随影内容编辑框：

接下来看代码的实现：
首先是HTML

<ul class="set1">
        <li><strong class="orange fontsize20">*</strong>请选择文章发布方式</li>
        <li><span class="webnamesec sizese">
          <input type="radio" name="identity" value="URL发布" onclick="radioClick()"/>URL发布
          <input type="radio" name="identity" value="编辑发布" onclick="radioClick()"/>编辑发布
          </span></li>
 </ul>

• 上面的代码中的input框保证name属性的值是一样的

<ul class="set1" id="casea" style="display:none">
        <li>外部URL</li>
        <li><span class="webname">
        <input name="url" type="text" id="url" value="$!obj.url" size="40" />
        </span><span id="nothis"><strong class="q"></strong><strong class="w">填写URL后，该文章链接会直接跳转到对应的URL，URL以http://开头</strong><strong class="c"></strong></span></li>
</ul>
<ul class="set1" id="contentinpt" style="display:none">
     <li><strong class="orange fontsize20"></strong>内容</li>
     <li>
     <span class="webname">
     <textarea name="content" cols="40" id="content">$!obj.content</textarea>
     </span>
     </li>
</ul>

• 将两个ul或者div什么的设置为默认隐藏style=”display:none”，定义两个不同的ID：例如id=”casea”和id=”contentinpt”
  JS代码：

<script>
function radioClick() {
          //定义一个变量show，show获取的是被选中的radio对应的值
          var show="";
          //取到所有的单选
          var apm = document.getElementsByName("identity");
          //遍历
          for(var i=0;i < apm.length;i++){
          //取到所选中的值checked
              if(apm[i].checked)
                  show = apm[i].value;
          }
          //接下来就是对取到的值，进行显示和隐藏操作。
          switch (show){
              case 'URL发布':
                  document.getElementById("casea").style.display="block";
                  document.getElementById("contentinpt").style.display="none";
                  break;
              case '编辑发布':
                  document.getElementById("casea").style.display="none";
                  document.getElementById("contentinpt").style.display="block";
                  break;
              default:
                  document.getElementById("casea").style.display="none";
                  document.getElementById("contentinpt").style.display="none";
                  break;
          }

      }

  </script>

肯定还有更好，更简洁的方式，不喜勿喷，又看到的大牛，希望多多指导交流。