Question

情景：我有一个问题，其中有2个单选按钮＆amp;两个子表单：subformA和subformB

当用户检查第一个单选按钮时，子格式A应该淡入其他，如果他检查第二个单选按钮subformB应该淡入。

问题：我已经完成了代码，但问题是当用户检查第一个单选按钮时，subformA会出现＆amp;如果他改变主意并点击另一个选项而不是之前的选项。子表单B连接到subformA。

请求：我想让这些表单互为独占（如果用户重新选择其单选按钮，则不会发生连接效果）。这是一件我无法注意到的小事。谢谢！

我的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/

Answer 2

您正在做的是检查单个单选按钮是否被单击，然后检查它是否被选中。好吧，既然用户点击了一个单选按钮，它当然会被选中。

您需要做的是删除if语句，然后只需单击按钮A，淡出subformA in和subformB out。如果jQuery很聪明（我怀疑它......）它将不会淡出subformB，如果它已经淡出，所以没有问题。

类似地，当单击按钮B时，淡入subformB in和subformA out。

Answer 3

如果有人点击并且已经选中了单选按钮，则会保持选中状态。所以你的if else声明对你没有任何帮助。当你点击A时，我会做的是表格B总是淡出，当你点击B时，表格A总是淡出。像这样简单：

$("#element_4_1").click(function() {
    $('#subafform').fadeIn();
    $('#subbfform').fadeOut();
}

关于内容的fadeIn / fadeOut效果的简单jQuery故障

3 个答案: