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

Question

就像标题所示。 这里是我的代码：

​​

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

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

Answer 1

，如果它在默认情况下未选中刚才设置的显示：无在CSS中类和that'it

.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 2

发生这种情况，因为你的函数只得到开启了对复选框的更改。 浏览器刷新不是js的更改事件。

所以要实现自己的目标，只需添加

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

后直接在onload/domready中（不管你使用）调用...

Answer 3

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

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