Переключить видимость 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> 

Я также попробовал «еще если» на 3 после первого, без успеха. Указатели приветствуются!

Answer 1

Вы пытаетесь выбрать все элементы ввода, используя тот же идентификатор (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

Идентификаторы должны быть уникальными, вы поэтому должны сделать это:

<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 у вас есть одинаковые идентификаторы для всех радиокнопок - изменить идентификатор класса, так он будет выглядеть следующим образом:

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