Question

当使用jquery检查单选按钮时，我想隐藏Div。我的Jquery代码可在“页面加载”上使用，但是当用户刷新IE浏览器时，隐藏将更改为显示。下面是我的代码，我们将不胜感激。

$("[name='Radios']").click(function () {
	if ($("input:radio.Radio base:checked")) {
		$("#EmployeeSelection").hide();
	}
});

<label type="radio" value="2" name="Radios">
 <input name="RadioButton" class="Radio base" id="checkbox" type="radio">
</label>

 <div id="EmployeeSelection">
            <div>
                <h4>
                    <span>Documents</span>
                </h4>                 
        </div>
    </div>

Answer 1

创建一个函数，而不是在刷新时运行它：

// Create function 
function hideSelection() {
    if ($("input:radio.Radio base:checked")) {
        $("#EmployeeSelection").hide();
    }
}

$(document).ready(function(){
    // Action on click 
    $(document).on('click', '[name="Radios"]', function () {
        hideSelection(); 
    });

    // Action on refresh 
    hideSelection(); 
});

Answer 2

但是当用户刷新IE浏览器时，则隐藏变为显示

此问题不仅与IE有关，而且是刷新浏览器时的常见结果。您需要做的是在页面或刷新之间的服务器端或客户端保存必要的数据。在客户端，您可以使用Cookies和jQuery插件或纯JS代码来保存 Radios 元素的状态。您可以考虑将 change 事件用作单选按钮，而不是 click 事件。

$("[name='Radios']").on('change', function (e) {
    if ($(this).children().is(":checked")) {
        //
        // set cookie on change
        //
        Cookies.set('Radios', true, { expires: 1 });
        $("#EmployeeSelection").hide();
    }
});

//
// test cookie at page load
//
var rCookie = JSON.parse(Cookies.get('Radios') || false);
if (rCookie) {
    $("[name='Radios']").trigger('click');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>


<label type="radio" value="2" name="Radios">
    <input name="RadioButton" class="Radio base" id="checkbox" type="radio">
</label>


<div id="EmployeeSelection">
    <div>
        <h4>
            <span>Documents</span>
        </h4>
    </div>
</div>

当单选按钮选中重置时，jQuery隐藏div以在IE浏览器刷新时显示

2 个答案: