0

特定のラジオボタンオプションがクリックされているかどうかを確認する非常に単純なスクリプトを作成しようとしています。クリックされている場合は、別のフィールドセットが表示されます（これは正常に機能します）が、そのラジオボタンオプションの選択を解除すると、追加のフィールドセット（一見単純に見えますが、私には機能しません！）

また、私はJS / JQueryに慣れていないので、これをデバッグするのは大変でした。助けてくれてありがとう:)

フィールド表示をトリガーする私のHTMLラジオボタン-これには他に6つのラジオボタンオプションがあると想像してください（それぞれ[class = "otherFund"]で分類されます）。

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" onclick="set_item('DOP-Relief-Fund', 8)" onchange="relief_fund_handler()" />

これがテキストとフィールドで、上のボタンの選択で切り替えたいです

<p id="Earmark1" style="display: none;">
   <strong>Please designate below what relief fund you would like your <em>DOP Charitable Relief</em> donation to go towards (see bulleted examples above).</strong><br />
   <strong>Earmarked for <span class="required">*</span>:</strong><input type="text" name="Earmark1" id="Earmark1" size="50" />
</p>

そして、これが私のJSの試みです...

試行1：

function relief_fund_handler() {

   var relief_elem = document.getElementById("Relief1"),
       earmark_elem = document.getElementById("Earmark1"),
       donate_elem = document.getElementById("ItemName1");

   if (relief_elem.checked) {
       earmark_elem.setAttribute("style", "display: inline;");    
   } else if (".otherFund".checked) {          
       earmark_elem.setAttribute("style", "display: none;");
   }
}

試行2：

function relief_fund_handler() {

   var relief_elem = document.getElementById("Relief1"),
       earmark_elem = document.getElementById("Earmark1"),
       donate_elem = document.getElementById("ItemName1");

   if (relief_elem.checked) {  
       earmark_elem.setAttribute("style", "display: inline;");    
   } else {
       earmark_elem.setAttribute("style", "display: none;"); 
   }
}

試行3：

$("#Relief1:checked")( 
    function() { 
       $('#Earmark1').toggle();
    } 
);

試行＃3で、私も、に置き換えましたが:checked、.clickどれも機能しませんでした...助けてくれてありがとう！:).select.change

4

6 に答える 6

1

これを試して：

$("input.otherFund").change(function() {
    $('#Earmark1').toggle($(this).attr('id') == 'Relief1');
});​
于 2012-12-21T21:33:35.427 に答える
1

次のように、ラジオボタンからすべてのイベントを削除してみてください。

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" />

そして、次のjqueryスクリプトを使用します。

​$(function(){
    $("#Relief1").change(function(){
        $(this).is(":checked") ? $("#Earmark1").show() : $("#Earmark1").hide();
    });
});​
于 2012-12-21T21:33:55.117 に答える
0

みんなありがとう!!! 私は最終的にkennypuの例を使用しました。「：checked」はラジオボタンであるにもかかわらず、正常に機能しているように見えました。私はそれにいくつかの微調整をしなければならなかった、そして「else」の代わりに2つの別々の機能で終わった。何らかの理由で、他の例は私にはうまくいきませんでした-それがあなたのコードに関係していることは非常に疑わしいですが、おそらくページで起こっている他のことと関係があります。外部のフォーム/データベースハンドラーを使用しているため、イベントやその他のコードをそこに保持する必要があります。

これが最終的に機能したものです。

    $(function(){
    $("#Relief1").change(function(){
    if($(this).is(":checked")) {
      $("#Earmark1").show();
      }
      });
    });

  $(function(){
    $("#Radio1, #Radio2, #Radio3, #Radio4, #Radio5, #Radio6, #Radio7").change(function(){
    if($(this).is(":checked")) {
      $("#Earmark1").hide();
      }
      });
    });

かなり不格好ですが、必要な方法で動作させることができました。貢献してくれた皆さん、ありがとうございました。とても助かりました。

于 2012-12-27T17:46:06.340 に答える
0

各ラジオボタンを繰り返し処理し、各ラジオボタンにイベントハンドラーを割り当てることができるため、選択すると他のフィールドが表示され、選択を解除すると他のフィールドが非表示になります。以下のコードは、正しい答えにたどり着くのに役立つ場合があります。

// Iterate the radio buttons and assign an event listener

$('input[name="ItemName1"]').each( function() {

    // Click Handler

    $(this).live('click', function() {

        // Check for selected

        if ( $(this).is(':checked') )
        {
            $('#EarMark1').show();
        }
        else 
        {
            $('#EarMark1').hide();
        }
    });

});

それは完璧ではなく、最もエレガントなソリューションでもありません。少し調整すれば、正しい方向を向くはずです。

于 2012-12-21T21:42:52.820 に答える
-1

試す：

<script>
var r=$('input[name="ItemName1"]).is(:checked);
if(r)
{
alert("Item is checked");//replace with any code
}
</script>
于 2012-12-21T21:38:03.407 に答える
-2

すでにjQueryを使用している場合、これは.show()andを使用するのと同じくらい簡単.hide()です：

$('#Relief1').on('change',function() {
  if($(this).is(':checked')) {
    $('#Earmark1').show();
  } else {
    $('#Earmark1').hide();
  }
});

フィドルの例：http：//jsfiddle.net/x4meB/

また、重複するIDは使用しないでください。これらは一意であることが意図されています（この場合、#Earmark1pタグとスパンに重複があります）。また、フィドルの例では、オプションが1つしかない場合はラジオのチェックを外すことができないため、ラジオではなくチェックボックスに変更しました。

于 2012-12-21T21:36:36.810 に答える