Question

就像标题所说的那样。这是我的代码：

$('#somediv').change(function() {
    if(this.checked) {
        $('.leaflet-marker-pane').show(1);
    }
    else {
        $('.leaflet-marker-pane').hide(1);
    }       
});

<input style="float: left;" type="checkbox" id="somediv" name="somediv">

刷新浏览器时会发生这种情况。内容不应显示，因为该复选框未选中，但它正在显示。

Answer 1

问题是因为您只在执行更改复选框时显示/隐藏元素的逻辑。您可以通过在加载DOM时触发事件来解决此问题。另请注意，您可以使用toggle()简化代码。试试这个：

$('#somediv').change(function() {
    $('.leaflet-marker-pane').toggle(this.checked)
}).change(); // this triggers the logic on load of the page

Answer 2

如果默认情况下取消选中，只需在css中为该类设置一个display：none即可

.leaflet-marker-pane{
  display: none;
}

或者，如果是动态值检查文件就准备好了值并进行设置，那么刷新页面时它会根据复选框值显示/隐藏

$(document).ready(function() {
    check($('#somediv'));
});

$('#somediv').change(function() {
    check($(this));
});

function check(checkbox){
    checkbox.is(":checked") ? $('.leaflet-marker-pane').show() : $('.leaflet-marker-pane').hide();
}

在此处查看示例：FIDDLE

Answer 3

发生这种情况，'因为只有在更改复选框时才会触发您的功能。浏览器刷新不是js的更改事件。

为了实现您的目标，只需添加

即可

$('.leaflet-marker-pane').hide(1);

在onload / domready（无论你使用什么）之后直接调用...

未选中复选框，但会显示已选中复选框的内容

3 个答案: