根据单选按钮选择切换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。我有这个工作正常的第一个电台，但没有任何后续的（并没有错误报告在萤火虫）。这就是我现在所拥有的;

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

我也尝试过'其他如果'在第一个3后，没有成功。指针欢迎！

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

Answer 2

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

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>