チェックボックスがオフになっていますが、チェックボックスの内容が表示されています

Question

タイトルのとおりです。 は、ここに私のコードです：

​​

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

ブラウザがリフレッシュされたとき、この問題が発生しました。チェックボックスはオフになっていますが、コンテンツが表示されているため、コンテンツが表示されません。

Answer 1

それだけ表示設定はデフォルトでオフになっている場合：クラスにCSSのなしとthat'it

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

か、それが文書準備値の動的な値のチェックだと、それを設定した場合は、そのFIDDLEこの問題が発生した

Answer 2

、「あなたの関数のみを取得します原因：さわやかなページは、それが

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

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

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

チェック例ここでチェックボックスの値に応じて表示/非表示になりますチェックボックスの変更時に発砲しました。 ブラウザの更新は、jsの変更イベントではありません。ので、あなたの目標を達成するための

、単にあなただけ/表示するようにロジックを実行しているため、問題がある...呼び出し（あなたが使用何でも）domreadyのonload /後

Answer 3

を

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

ダイレクトを追加チェックボックスが変更されたときに要素を非表示にします。これは、DOMのロード時にイベントをトリガーすることで解決できます。 toggle()を使用してコードを単純化することもできます。試してみてください：

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