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

您有2个元素共享相同的id。那不行。将id按钮的history更改为唯一的内容。您还可以将选择器更改为类选择器：

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

这确保click事件适用于两个单选按钮。

Answer 2

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 3

正如一些人所说，你不应该拥有共享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(); } });

Codepen sketch.

如果选择了无线电值，则显示div

3 个答案: