新人请教radio多个按钮下如何针对选中每个按钮弹出DIV

Question

请教各位大虾  如何实现以下效果  选择选项2  则显示BOX2 的内容  选中选项3  则显示BOX3的内容  但是BOX2 就要隐藏<script language="javascript">
function ShowDiv(objid) {
document.getElementById(objid).style.display = "block";
}
function Hidden(objid) {
document.getElementById(objid).style.display = "none";
}

</script>
  <div class="box2"  id="box2" style="display:none">内容2</div>
<ul>
   <li><input type="radio" name="x1" value="a1" checked id="a1">选项1</li>
   <li><input type="radio" name="x1" id="a2"  value="a2" onclick="ShowDiv('box2')">选项2
   
  <a href="#" onclick="ShowDiv('box2')">aa2</a>
 
   
   </li>
   <li><input type="radio" name="x1" id="a3"  value="a3" onclick="ShowDiv('box3')">选项3
   <div class="box3" id="box3" style="display:none">内容3</div>
   </li>
</ul>radio多个按钮javascript

Answer 1

  <div class="box2"  id="box2" style="display:none">内容2</div>
<ul>
   <li><input type="radio" name="x1" value="a1" checked id="a1">选项1</li>
   <li><input type="radio" name="x1" id="a2"  value="a2" onclick="ShowDiv('box2');Hidden('box3')">选项2
   
  <a href="#" onclick="ShowDiv('box2')">aa2</a>
 
   
   </li>
   <li><input type="radio" name="x1" id="a3"  value="a3" onclick="ShowDiv('box3');Hidden('box2')">选项3
   <div class="box3" id="box3" style="display:none">内容3</div>
   </li>
</ul>
有比这个更好的方法么

Answer 2

<div class="box2"  id="box2" style="display:none">内容2</div>
<ul>
    <li><input type="radio" name="x1" value="a1" checked id="a1">选项1</li>
    <li><input type="radio" name="x1" id="a2"  value="a2" onclick="ShowDiv('box2')">选项2<a href="#" onclick="ShowDiv('box2')">aa2</a></li>
    <li><input type="radio" name="x1" id="a3"  value="a3" onclick="ShowDiv('box3')">选项3
        <div class="box3" id="box3" style="display:none">内容3</div>
    </li>
</ul>
<script type="text/javascript">
    function ShowDiv(objid) {
        document.getElementById("box2").style.display = objid=="box2"?"block":"none";
        document.getElementById("box3").style.display = objid=="box3"?"block":"none";
    }
</script>