使用jQuery和jQueryUI显示/隐藏div

我对此非常陌生，知识有限（过去几周所有的自学）。我已经尝试了许多其他人提出的类似问题的解决方案，但似乎没有一个适合我。使用jQuery和jQueryUI显示/隐藏div

我想设置'date_range'div只在选择'范围'过滤器时可见。我正在使用jQuery 1.8.2和jQueryUI 1.9（用$ .noConflict（）;）设置。

我的代码在下面（请善良，我知道我不是很擅长），任何帮助表示赞赏。

<script> 
$('#filters').is(function() { 
if ($('#range').attr('checked')) { 
    $('#date_range').show(); 
} else { 
    $('#date_range').hide(); 
} 
}); 
</script> 

    <div> 
     <form align="center" id="filters"> 
      <input type="radio" id="last24" name="filter_radio" checked="checked"/><label for="last24">Last 24hrs</label> 
      <input type="radio" id="WTD" name="filter_radio" /><label for="WTD">WTD</label> 
      <input type="radio" id="last_week" name="filter_radio" /><label for="last_week">Last Week</label> 
      <input type="radio" id="range" name="filter_radio" /><label for="range">Range</label> 
       <div id="date_range"> 
        <br /> 
      <label for="from">From: </label><input type="text" id="from" name="from"/> 
      <label for="to">To: </label><input type="text" id="to" name="to" /> 
       </div> 
     </form>  
    </div>

来源

2012-10-30 xgstr

缺少$（函数（）{}）;围绕你的jQuery。 – user1032531

试试这个代码： -

这是jQuery来隐藏和显示： -

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script> 
<script> 
function asfd(str) 
{ 
if(str==true) 
{ 
jQuery('div#renew').show(); 
} 
else 
{ 
jQuery('div#renew').hide(); 
} 
} 
</script>

这是jQuery函数称为： -

<input type="checkbox" autocomplete="off" onchange="asfd(this.checked);"/>

。这是将隐藏或显示DIV： -

<div id="renew" style="display: none ;"> 
........Content......... 
</div>

来源

2012-10-30 12:12:41

谢谢，这个工作很完美，我也学到了一些东西。 – xgstr

有时会导致闪烁。任何解决方案来避免这种情况 – user122345656

试试这个代码

$(function(){ 

    $('#date_range').hide(); 

    $('#filters').on('click' ,'input[type=radio]', function(){ 
     if (this.id == "range" && this.checked) { 
      $('#date_range').show(); 
     } else { 
      $('#date_range').hide(); 
     } 
    }); 

});

入住这DEMO

希望这将有助于

来源

2012-10-30 12:06:57

你可以用这个

实现它

$('#date_range').hide(); 

$('[name=filter_radio]').on('click', function(){ 
    if($('#range').is(':checked')){ 
     $('#date_range').show(); 
    } else { 
     $('#date_range').hide(); 
    } 
});

希望它简单明了..

来源

2012-10-30 12:10:50 Milli

你可以试试这个

标记：

<label><input id="last24" type="radio" name="filter_radio" value="1" />Last 24hrs</label> 
<label><input id="WTD" type="radio" name="filter_radio" value="2" />WTD</label> 
<label><input id="last_week" type="radio" name="filter_radio" value="3" />Last Week</label> 
<label><input id="range" type="radio" name="filter_radio" value="4" />Range</label> 

<div id="filter_radio-4" class="toHide" style="display:none"> 
    <br /> 
      <label for="from">From: </label><input type="text" id="from" name="from"/> 
      <label for="to">To: </label><input type="text" id="to" name="to" /> 
</div>

的Javascript：

$(function() { 
    $("[name=filter_radio]").click(function(){ 
      $('.toHide').hide(); 
      $("#filter_radio-"+$(this).val()).show('slow'); 
    }); 
});

DEMO：http://jsfiddle.net/chridam/FSrBC/

来源

2012-10-30 12:18:45 chridam

感谢您的回复。这个问题是我计划分配单选按钮的时间范围，以允许他们过滤从Oracle数据库提取的数据。 – xgstr

不用担心。如果你有一个工作解决方案，那很好 – chridam

使用jQuery和jQueryUI显示/隐藏div

回答

相关问题