javascript - 根据单选按钮选择切换 DIV 可见性

Question

目前我仍在寻找使用 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。我在第一台 radio 上工作正常，但对于任何后续 radio 都没有(并且在 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>

我还在第一个之后的第三个尝试了“else if”，但没有成功。欢迎指点!

Answer 1

您正在尝试使用相同的 ID ( ID's should be unique ) 选择所有输入元素。您可以尝试将您的 ID #dtype 更改为类 .dtype，然后通过选择它们。类代替。

这是一个有效的 jsFiddle 关于您的用例。

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>

jQuery:

$(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');}
  });
});