0

我有这个 HTML 表单

<form>
    <label><input type="radio" name="type" id="js-item" /> Select me</label>
    <div id="js-text" style="display:none;">You selected an item</div>
</form>

还有一些 jQuery JS 

$(document).ready(function() {
    $(document).on('click','#js-item',function(){
        $('#js-text').show();        
    });
});

当用户单击单选按钮时，div 会显示自己。但是，当离开该页面（例如通过提交或单击链接）并在浏览器中按下后退按钮时，浏览器会重新选择单选项目。但是 div 也没有显示（就像它被选中一样）。未触发 show() 事件

例如，当导航返回时，如何触发所有表单输入处理程序加载到浏览器设置的表单当前状态？无需复制所有逻辑代码

任何帮助表示赞赏。问候

解决方案

根据反馈，我创建了这个，也许它可以帮助某人。

<form>
    <label><input type="radio" data-toggle="js-text" /> Select me</label>
    <div id="js-text">You selected an item</div>
</form>

$(document).ready(function() {
    $('*[data-toggle]').each(function(){
        var $this = $(this);
        var $toggle_el = $('#'+$(this).data('toggle'));

        $this.is(':checked') ? $toggle_el.show() : $toggle_el.hide();
        $(document).on('click', $this, function (e) {
            $this.is(':checked') ? $toggle_el.slideDown('fast') : $toggle_el.hide();
        });
    });

});

如果要消除任何闪烁，则必须将隐藏类添加到切换可见性的元素中。谢谢。

4

3 回答 3

1

我一般这样做

    $(document).ready(function() {
        showHideText(); //check for all on form load 
        $(document).on('click','#js-item',function(){ 
            showHideText('js');       
        });
    });
    function showHideText(id){
     if (id){ //check for specific id
      if($('#'+id+'-item').is(':checked')) {
                  $('#'+id+'-text').show();       
            }
    }else{ //check for all
        // for each of your ids do the above check...
    }
}

如果您需要澄清，请告诉我

于 2013-05-28T12:12:51.690 回答
1

您可以检查单选按钮是否像这样检查

$('#js-item').is(':checked')

因此，在文档准备好时，您可以立即向您显示 div，何时#js-item检查。

$(document).ready(function() {
    yourFunction();
    $(document).on('change','form', yourFunction);
});

function yourFunction() {
    $('#js-item').is(':checked') ? $('#js-text').show() : $('#js-text').hide();    
}

JSFiddle：http: //jsfiddle.net/pmYYh/2/

对于无重复代码，将逻辑提取到函数中。

于 2013-05-28T12:01:23.913 回答
-1 
$(document).ready(function() {
  $('input:radio').attr({checked:false});

    $(document).on('click','#js-item',function(){
        $('#js-text').show();        
    });
});
于 2013-05-28T12:01:37.197 回答