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 をすぐに表示する必要があります。これは最初のラジオでは正常に機能していますが、後続のラジオでは正常に機能していません (また、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 の後に '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 に答える