Javascript 基于单选按钮选择切换DIV可见性

我目前仍在寻找Javascript的解决方法，因此，如果我遗漏了一些非常明显的东西（可能是！），我深表歉意

我有一个小表单，上面有许多单选按钮，就像这样

<input type="radio" name="dtype" id="dtype" value="option1">
<input type="radio" name="dtype" id="dtype" value="option2">
<input type="radio" name="dtype" id="dtype" value="option3">
<input type="radio" name="dtype" id="dtype" value="option4">

根据用户的选择，我需要立即显示相关的div。我在第一台收音机上可以正常工作，但在随后的任何收音机上都不能正常工作（firebug中没有错误报告）。这就是我现在拥有的

<script type="text/javascript">
$(function() {
$('#dtype').change(function() {
if($(this).val() == 'option1') {$('#div1').slideToggle('500');}
if($(this).val() == 'option2') {$('#div2').slideToggle('500');} 
if($(this).val() == 'option3') {$('#div3').slideToggle('500');}
if($(this).val() == 'option4') {$('#div4').slideToggle('500');}
});
});
</script>

$（函数（）{
$（'#dtype'）.change（function（）{
if（$（this.val（）=='option1'）{$（'#div1'）.slideToggle（'500'）；}
if（$（this.val（）=='option2'）{$（'#div2'）.slideToggle（'500'）；}
if（$（this.val（）=='option3'）{$（'#div3'）.slideToggle（'500'）；}
if（$（this.val（）=='option4'）{$（'#div4'）.slideToggle（'500'）；}
});
});

---

我还尝试了在第一次之后的第3次使用“else if”，但没有成功。欢迎指点

您正在尝试使用相同的ID选择所有输入元素（）。您可以尝试将ID

#dtype

更改为类

.dtype

，然后通过选择它们。改为上课

这里有一个关于您的用例的有效的

HTML:

<input type="radio" name="dtype" class="dtype" value="option1">
<input type="radio" name="dtype" class="dtype" value="option2">
<input type="radio" name="dtype" class="dtype" value="option3">
<input type="radio" name="dtype" class="dtype" value="option4">

<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>
<div id="div4">D</div>

$(function() {
  $('.dtype').change(function() {
    if($(this).val() == 'option1') {$('#div1').slideToggle('500');}
    if($(this).val() == 'option2') {$('#div2').slideToggle('500');} 
    if($(this).val() == 'option3') {$('#div3').slideToggle('500');}
    if($(this).val() == 'option4') {$('#div4').slideToggle('500');}
  });
});

---

ID必须是唯一的，因此必须执行以下操作：

<input type="radio" name="dtype" id="dtype1" value="option1">
<input type="radio" name="dtype" id="dtype2" value="option2">
<input type="radio" name="dtype" id="dtype3" value="option3">
<input type="radio" name="dtype" id="dtype4" value="option4">

还有剧本：

<script type="text/javascript">
  $(function() {
    $('input[name=dtype]').change(function() {
    if($(this).val() == 'option1') {$('#div1').slideToggle('500');}
    if($(this).val() == 'option2') {$('#div2').slideToggle('500');} 
    if($(this).val() == 'option3') {$('#div3').slideToggle('500');}
    if($(this).val() == 'option4') {$('#div4').slideToggle('500');}
    });
  });
</script>

$（函数（）{
$（'input[name=dtype]'）。更改（函数（）{
if（$（this.val（）=='option1'）{$（'#div1'）.slideToggle（'500'）；}
if（$（this.val（）=='option2'）{$（'#div2'）.slideToggle（'500'）；}
if（$（this.val（）=='option3'）{$（'#div3'）.slideToggle（'500'）；}
if（$（this.val（）=='option4'）{$（'#div4'）.slideToggle（'500'）；}
});
});

您的问题在于ID，您的所有单选按钮的ID都相同-将ID更改为class，使其看起来像：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<input type="radio" name="dtype" class="dtype" value="option1">
<input type="radio" name="dtype" class="dtype" value="option2">
<input type="radio" name="dtype" class="dtype" value="option3">
<input type="radio" name="dtype" class="dtype" value="option4">

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

<script type="text/javascript">
$(function() {
$('.dtype').change(function() {
alert($(this).val());
if($(this).val() == 'option1') {$('#div1').slideToggle('500');}
else if($(this).val() == 'option2') {$('#div2').slideToggle('500');} 
else if($(this).val() == 'option3') {$('#div3').slideToggle('500');}
else if($(this).val() == 'option4') {$('#div4').slideToggle('500');}
});
});
</script>

1.
2.
3.
4.
$（函数（）{
$（'.dtype'）.change（函数（）{
警报（$（this.val（））；
if（$（this.val（）=='option1'）{$（'#div1'）.slideToggle（'500'）；}
else if（$（this）.val（）=='option2'）{$（'#div2'）.slideToggle（'500'）；}
else if（$（this）.val（）=='option3'）{$（'#div3'）.slideToggle（'500'）；}
else if（$（this）.val（）=='option4'）{$（'#div4'）.slideToggle（'500'）；}
});
});

如果您在jsfiddle.net上创建一个演示，您将收到更好的结果谢谢！这很好，我学到了一些新东西@当然是用户125697！我是在没有评论的情况下开始写这篇文章的——我想我写得很慢——感谢所有花时间回答的问题——不幸的是，我只能接受其中一个作为答案，尽管你们都回答正确。@user125697无论如何都不能写不同的内容，因为给定的$（“#div1”）$（#div2'）……；）一切都很好！