使用jQuery和jQueryUI显示/隐藏div

Question

我对此非常陌生并且知识有限(过去几周都是自学).我尝试了其他人提出的类似问题的一些解决方案,似乎没有一个对我有用.

我试图将'date_range'div设置为仅在选择'range'过滤器时才可见.我正在使用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>

Answer 1

试试这个代码

$(function(){

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

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

});

检查这个演示

希望它会有所帮助