根据单选按钮选择切换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。 我对第一台收音机工作正常，但不适用于任何后续收音机（并且没有在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应该是唯一的 ）。 您可以尝试将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');}
  });
});

Answer 2

Ids必须是唯一的，因此你必须这样做：

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

Answer 3

您的问题是ID，所有单选按钮都有相同的ID - 将ID更改为类，所以它看起来像：

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