チェックボックスに応じて、いくつかのdivの要素を非表示/表示したいと思います。チェックボックスがあり、状態は localStorage に保存されましたが、更新後の DIV 要素は保存されていません (デフォルト状態でロード)。jQuery(-モバイル)。助けてくれて本当にありがとうございます。
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
<legend>Some text.</legend>
<div id="checkbox1">
<label>
<input type="checkbox" data-theme="a" name="ligne1" data-iconpos="right" checked="checked" />Ligne 1</label>
</div>
<div id="checkbox2">
<label>
<input type="checkbox" data-theme="a" name="ligne2" data-iconpos="right" checked="checked" />Ligne 2</label>
</div>
<div id="checkbox3">
<label>
<input type="checkbox" data-theme="a" name="ligne3" data-iconpos="right" checked="checked" />Ligne 3</label>
</div>
<fieldset>
$(document).ready(function () {
function getCurrentValue(checkMe) {
return checkMe.is(':checkbox') ? checkMe.prop('checked') : checkMe.val();
}
function checkvalues() {
var original = true;
$(':input').each(function () {
if (getCurrentValue($(this)) !== $(this).data('originalvalue')) {
original = false;
}
});
return original;
}
if (localStorage) {
$(':input').each(function () {
$(this).data('originalvalue', getCurrentValue($(this)));
});
$('#checkbox1').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne1').show();
} else {
$('#ligne1').hide();
}
});
$('#checkbox2').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne2').show();
} else {
$('#ligne2').hide();
}
});
$('#checkbox3').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne3').show();
} else {
$('#ligne3').hide();
}
});
}});
実際の例はこちらです。