チェックボックスの値を保存すると、リンクされた画像の表示/非表示に関する問題が発生する

Question

対応するチェックボックスの値に基づいて画像を表示または非表示にするコードを記述しました。 'checked = "checked"がチェックボックスに書き込まれていれば、リロード時に画像を表示または非表示にすることができました。

チェックボックスの値を保存するコードを書き込むことができましたが、画像はチェックされた値またはチェックされていない値につながれなくなり、リロードとともに変更されます。

私の最終目標は、画像を表示するチェックボックスをオンにし、画像を非表示にするチェックボックスをオフにして、変更が行われた後に正しい値がリロードされるように保存する必要があります。

これはコード全体の小さな切り捨てです。 64種類の画像にリンクされた一連の64個のチェックボックスがあり、マップされた背景画像をオーバーレイします。

これは、最終的にSharePointサイトに使用されることになります（違いがある場合）。

ご協力いただきありがとうございます。

（下部にjsfiddleデモへのリンクがあります）

HTML：

<a href="home.aspx"> 
<p id="A1R1" style="left:146px;top:256px;position:absolute;z-index:inherit;" class="hidden"> 
<img id="A1R1" alt="A1R1" src="red.jpg" width="108" height="60" /> 
</p> 
</a> 
<a href="home2.aspx"> 
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden"> 
<img id="A2R2" alt="A2R2" src="green.html" width="108" height="60" /> 
</p> 
</a> 

<fieldset class="fieldset-auto-width" style="width:165px"> 
<center> 
<p style="font-size:25px">Show/Hide</p> 
</center> 
<fieldset class="fieldset-auto-width" style="width:150px"> 
<center>A1 Green/Red 
<p> 
</center> 
<center> 
<input type="checkbox" id="A1G" checked="checked" /> </center> 
</fieldset> 
<fieldset class="fieldset-auto-width" style="width:150px"> 
<center>A2 Green/Red 
<p> 
</center> 
<center> 
<input type="checkbox" id="A2G" checked="checked" /> </center> 
</fieldset> 
</fieldset> 
<center> 
<input type="button" id="ReserveerButton1" value="save" onclick="save()" /> 
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" /> 
</center> 

のjQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
(function(i, $) { 
var $A_1_G = $('#A1G'), 
$A_1_R_1 = $('#A1R1'); 

var toggleMain = function() { 
$A_1_R_1.slideToggle(); 
}; 
if ($A_1_G.is(':checked')) { 
toggleMain(); 
} 
$A_1_G.on('click', toggleMain); 
})(document, jQuery); 
(function(i, $) { 
var $A_2_G = $('#A2G'), 
$A_2_R_2 = $('#A2R2'); 

var toggleMain = function() { 
$A_2_R_2.slideToggle(); 
}; 
if ($A_2_G.is(':checked')) { 
toggleMain(); 
} 
$A_2_G.on('click', toggleMain); 
})(document, jQuery); 
</script> 

Javascriptを：

function save() { 
var checkbox = document.getElementById('A1G'); 
localStorage.setItem('A1G', checkbox.checked); 

var checkbox = document.getElementById('A2G'); 
localStorage.setItem('A2G', checkbox.checked); 
} 

function load() { 
var checked = JSON.parse(localStorage.getItem('A1G')); 
document.getElementById("A1G").checked = checked; 

var checked = JSON.parse(localStorage.getItem('A2G')); 
document.getElementById("A2G").checked = checked; 
} 

function wis() { 
location.reload(); 
localStorage.clear() 

} 

load(); 

Link to fiddle code

Answer 1

これはそれの世話をするようだ：チェックボックスは事前にチェックされるようにhttp://jsfiddle.net/w0yL5njs/

1. は、あなたの「セーブ/ロード」コードブロックの後にコードブロック「jQueryの/ wのtoggleMain」あなたを動かし

   画像の初期可視性が設定される前に

   だからあなた<script>タグの順序は

   A）<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   B）のjQueryを使用するスクリプトになります。 c）jQueryを使用しないsave/loadスクリプト。

   実際には、（b）と（c）は同じ<script>に入れることができますが、（a）は別々にする必要があります。

2. 画像を含む<p>にdisplay:noneを追加します。

   • class="hidden"は何を意図したものですか？あなたは、あなたがあなたの周りに64 `checkboxes`右の全体の束を持っている、と言う

Answer 2

// Remove 
if ($A_1_G.is(':checked')) { 
toggleMain(); 
}  
// ADD 
if ($A_1_G.is(':checked')) { 
    $A_1_R_1.show(); 
}else{ 
    $A_1_R_1.hide(); 
} 

//remove 
if ($A_2_G.is(':checked')) { 
toggleMain(); 
} 

if ($A_2_G.is(':checked')) { 
    $A_2_G.show(); 
}else{ 
$A_2_G.hide(); 
}