2

divラジオの値が選択されている場合は表示したいのですが、別の値が選択されている場合は再び非表示にします

<input type="radio" name="timespan" id="timespan" value="ongoing" checked>On-going
<input type="radio" name="timespan" id="timespan" value="history">Historical


<script type="text/javascript">
        $(document).ready(function() {
          $('.end_date').css('display','none');
              $('#timespan').click(function () {
               var selected = $(this).find(':checked').val();  
                  if(selected == 'history') {
                   $('.end_date').css('display','block');
                } else {
                   $('.end_date').css('display','none');
                 }
          });       
        });
</script>

が選択されている場合historyはクラスを持つ要素end_dateを表示し、それ以外の場合ongoingは非表示にします

4

3 に答える 3

3

HTML マークアップには、同じ を持つ 2 つの要素を含めることはできませんid。idページ上の は一意である必要があります。代わりに、class両方のラジオ ボタンにタイムスパンを追加してください。

コード内.hide()で、プロパティをブロックまたはなし.show()に設定する代わりに使用できます。display

また、ラジオボタンを見つける代わりにchecked、クリックされたボタンがチェックされると想定できます。これにより、コードが単純化されます$(this).val();。$(this).find(':checked').val();

HTML

<input type="radio" class="timespan" name="timespan" value="ongoing" checked>On-going
<input type="radio" class="timespan" name="timespan" value="history">Historical
<div class="end_date">End Date</div>

Javascript

    $(document).ready(function() {
      $('.end_date').hide();
          $('.timespan').click(function () {
           var selected = $(this).val();  
              if(selected == 'history') {
               $('.end_date').show();
            } else {
               $('.end_date').hide();
             }
      });       
    });

JS フィドル: http://jsfiddle.net/hD4EY/

于 2013-08-19T22:46:36.160 に答える
0

一部の人が述べているように、ID を共有する HTML 要素を持つべきではありません。ID は一意の識別子です。ターゲティングの ID を変更します。私の例では、jQuery はラジオ入力クリック イベントを一般的にチェックし、ID をチェックします。それらが「歴史的」のターゲットと一致する場合、目的の div が表示されます。 HTML

<input type="radio" name="timespan" id="ongoing" value="ongoing" checked>On-going
<input type="radio" id="historical" name="timespan" value="history">Historical

<div class='end-date'>End-date</div>

CSS

.end-date { display: none; }

jQuery

$('input[type=radio]').on('click', function(){
  var selected = $(this).attr('id');

  if(selected === 'historical') {
    $('.end-date').fadeIn();
  } else {
    $('.end-date').hide();
  }
});

コードペン スケッチ。

于 2013-08-19T22:51:33.267 に答える