javascript - 关于内容淡入/淡出效果的简单 jQuery 故障

Question

场景:我有一个问题，有 2 个单选按钮和两个子表单:subformA 和 subformB

当用户检查第一个单选按钮时，子窗体 A 应该淡入，否则如果他检查第二个单选按钮 subformB 应该淡入。

问题:我已经完成了代码，但问题是当用户检查第一个单选按钮时， subformA 将出现，并且万一他改变主意并单击另一个选项而不是前一个选项。子表单B 连接到子表单A。

请求:我想让这些表单互斥(如果用户重新选择单选按钮，则不应发生串联效果)。这是一件我无法注意到的小事。谢谢!

我的js代码::

<!-- script for the Div -->
<script type="text/javascript" >
$(document).ready(function() {
$('#subafform').hide();
 $("#element_4_1").click( function(){
    if( $(this).is(':checked')) {
           $('#subafform').fadeIn();
    } else {
        $('#subafform').fadeOut();
    }
    });
    });

</script>

代码的其他部分:

<script type="text/javascript" >
$(document).ready(function() {
$('#subbform').hide();
 $("#element_4_2").click( function(){
    if( $(this).is(':checked')) {
           $('#subbform').fadeIn();
    } else {
        $('#subbform').fadeOut();
    }
    });
    });

</script>




 <li id="li_4" >
  <label class="description" for="element_4">Are you affiliated with Company? </label>
  <span>
   <input id="element_4_1" name="element_4" class="element radio required" type="radio" value="1" />
   <label class="choice" for="element_4_1">Yes</label>
   <input id="element_4_2" name="element_4" class="element radio required" type="radio" value="2" />
   <label class="choice" for="element_4_2">No</label>

  </span> 
  </li> 






<li id="subafform">
  <ul>
  <li id="li_5_1" >
  <label class="description" for="element_5_1">Department/College </label>
  <div>
   <input id="element_5_1" name="element_5_1" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  <li id="li_5_2" >
  <label class="description" for="element_5_2">Department Chair </label>
  <div>
   <input id="element_5_2" name="element_5_2" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  



</li>



<li id="subbform>

........

....

</li>

Answer 1

示例 DOM:

<form class="subform" id="subforma">
    <button>Form A</button>
</form>

<form class="subform" id="subformb">
    <button>Form B</button>
</form>

<form id="switcher">
    <input type="radio" name="show_form" value="subforma"> Show Form A<br />
    <input type="radio" name="show_form" value="subformb"> Show Form B<br />
</form>

示例 JQuery:

$('input[name="show_form"]').click(function(){
    var form_id = this.value;
    $('.subform:visible').fadeOut();
    $('#' + form_id).fadeIn();
});

CSS 示例:

.subform {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

#switcher {
    position:relative;
    top:100px;
}

演示:

http://jsfiddle.net/AlienWebguy/hFax3/