4

目前我仍在寻找解决 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 上尝试了“else if”，但没有成功。欢迎指点！

4

3 回答 3

3

您正在尝试使用相同的 ID 选择所有输入元素（ID 应该是唯一的）。您可以尝试将您的 ID 更改#dtype为 class .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');}
  });
});
于 2013-04-07T20:23:02.033 回答
0

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>
于 2013-04-07T20:24:50.333 回答
0

您的问题是您的 ID 对所有单选按钮都有相同的 ID - 将 id 更改为 class，因此它看起来像：

<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>
于 2013-04-07T20:26:45.363 回答