Question

我有这个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（）事件未被触发

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

任何帮助表示赞赏。此致

解

根据反馈，我创建了这个，也许它对某人有所帮助。

<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();
        });
    });

});

如果要忽略任何闪烁，则必须向切换可见性的元素添加隐藏类。感谢。

Answer 1

您可以检查单选按钮是否按此

进行检查

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

因此，在文档就绪时，您可以在检查#js-item时立即显示div。

$(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/

对于没有重复的代码，将逻辑提取到函数。

Answer 2

我一般都这样做

    $(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...
    }
}

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

Answer 3

$(document).ready(function() {
  $('input:radio').attr({checked:false});

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

jQuery刷新表单元素onload

3 个答案: