根據單選按鈕選擇切換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>