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

场景：我有一个问题，有两个单选按钮和两个子表单：

子表单

和

子表单

当用户检查第一个单选按钮时，如果他检查第二个单选按钮

子窗体

应fadeIn，则子窗体应fadeIn Elsei

问题：我已经完成了代码，但问题是当用户选中第一个单选按钮时，子窗体将出现&如果他改变主意并单击另一个选项而不是上一个选项。子表单连接到子表单

请求：我想使这些表单互斥（如果用户重新选择单选按钮，则不会出现连接效果）。这是一件我无法注意到的小事。谢谢

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

$（文档）.ready（函数（）{
$（“#子支架”）.hide（）；
$（“#元素_4_1”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'#subafform'）.fadeIn（）；
}否则{
$（'#subafform'）.fadeOut（）；
}
});
});

代码的其他部分：

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

$（文档）.ready（函数（）{
$（“#子形式”）.hide（）；
$（“#元素_4_2”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#子形式”）.fadeIn（）；
}否则{
$（“#子形式”）.fadeOut（）；
}
});
});

你是这家公司的附属公司吗？
对
不




系/学院

系主任


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

您需要做的是删除
if
语句，这样当单击按钮A时，子窗体就会淡入淡出。如果jQuery很聪明（我怀疑…），那么如果它已经消失了，它就不会消失，所以没有问题

同样，单击按钮B时，淡入和淡出子窗体。
您要做的是检查是否单击了单个单选按钮，然后检查是否选中了它。既然用户点击了一个单选按钮，它当然会被选中

您需要做的是删除
if
语句，这样当单击按钮A时，子窗体就会淡入淡出。如果jQuery很聪明（我怀疑…），那么如果它已经消失了，它就不会消失，所以没有问题

同样，当单击按钮B时，淡入和淡出子窗体。
如果有人单击并已选中单选按钮，它将保持选中状态。所以你的if-else声明对你没有任何好处。我要做的是让表单B在单击A时始终淡出，而表单A在单击B时始终淡出。简单如下：

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

如果有人单击并已选中单选按钮，它将保持选中状态。所以你的if-else声明对你没有任何好处。我要做的是让表单B在单击A时始终淡出，而表单A在单击B时始终淡出。简单如下：

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

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

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

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

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

示例CSS:

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

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

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

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

演示：

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

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

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

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

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

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

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

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

示例CSS:

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

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

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

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

演示：

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

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

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

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

这两个条件都显示了#子框架，您能提供一些表单的html吗？如果您能发布表单和无线电标记的示例，更容易理解您所说的内容。它是一个子表单的
js
，另一个子表单有相同的代码行，除了
elementid
和
subformname
这两个条件都显示了#子表单，您能提供一些表单的html吗？如果您能发布一个表单和无线电标记的示例，就更容易理解您所说的内容。它是一个子表单的
js
，另一个子表单除了
elementid
和
子表单名称
谢谢，您能否指定为什么显示：无是否放置在CSS中？我不是在设计它的这一部分。我只是添加了它，这样当页面加载时，用户就看不到表单了。以前您是使用
$（'#subafform'）.hide（）执行此操作的。hide函数所做的就是将CSS显示属性设置为none。谢谢，您可以指定为什么
display:none是否放置在CSS中？我不是在设计它的这一部分。我只是添加了它，这样当页面加载时，用户就看不到表单了。以前您是使用
$（'#subafform'）.hide（）执行此操作的。hide函数所做的只是将CSS显示属性设置为none。