Показать ДИВ, если значение радио выбрано

Question

Я хотел бы показать 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 Я бы хотел (а) чтобы они были спрячены

Answer 1

Html разметка не должна включать два элемента с одинаковыми 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/

Answer 2

У вас есть 2 элемента, разделяющие одинаковые id. Это не сработает. Измените id на кнопку history на что-то уникальное. Вы также можете сменить селектор на селектор класса:

$('.timespan').click(function() { ... 

Это гарантирует, что событие click применимо к обоим переключателям.

Answer 3

Как утверждают некоторые, у вас не должно быть элементов HTML, которые имеют идентификатор. ID - это уникальные идентификаторы. Измените идентификаторы для таргетинга. В моем примере jQuery в общем случае проверяет события ввода входного сигнала и проверяет идентификатор. Если они соответствуют вашей цели «исторической», то желаемый 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(); 
    } 
}); 

Codepen sketch.