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

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>

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

3 个答案: