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 标记不应包含具有相同 的两个元素，页面上的idanid应该是唯一的，而是将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 回答
2

您有 2 个元素共享相同的id. 那是行不通的。将按钮更改id为独特的东西。history您还可以将选择器更改为类选择器：

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

这样可以确保单击事件适用于两个单选按钮。

于 2013-08-19T22:42:47.197 回答
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();
  }
});

Codepen 草图。

于 2013-08-19T22:51:33.267 回答