保存复选框值会导致显示/隐藏链接图像的问题

I have written a code to show or hide a picture based on the value of corresponding checkboxes. I was able to have the picture shown or hidden on reload if 'checked="checked"' is written into the checkbox.

我已经编写了一个代码来显示或隐藏基于相应复选框值的图片。如果'checked =“checked”'被写入复选框,我可以在重新加载时显示或隐藏图片。

I was able to write a code to save the value of the checkbox but then the picture is no longer tethered to the checked/unchecked value and changes with reload.

我能够编写一个代码来保存复选框的值,但随后图片不再受限于已检查/未检查的值,并随着重新加载而更改。

My end goal is to have the a checked checkbox to show the picture and unchecked checkbox to hide the picture and I need the value saved to allow the correct value to work on reload after a change has been made.

我的最终目标是使用一个选中的复选框来显示图片,并选中未选中的复选框以隐藏图片,我需要保存的值以允许在更改后重新加载正确的值。

This is just a small snip of the overall code. The whole thing is a series of 64 checkboxes linked to 64 different pictures, which overlay a mapped background image.

这只是整个代码的一小部分。整个过程是一系列64个复选框,链接到64个不同的图片,覆盖了映射的背景图像。

I should also mention that this will ultimately be used for a SharePoint site, if that makes a difference.

我还应该提一下,如果这会产生影响,最终将用于SharePoint网站。

Thanks in advance for any help!!

在此先感谢您的帮助!!

(There is a link to jsfiddle demo at the bottom)

(底部有jsfiddle demo的链接)

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

链接到小提琴代码

2 个解决方案

#1

This seems to take care of it: http://jsfiddle.net/w0yL5njs/

这似乎照顾它:http://jsfiddle.net/w0yL5njs/

1. Move your 'toggleMain w/ jQuery' code block to after your 'save/load' code block, so that the checkboxes will be pre-checked before the images' initial visibility are set.

   将'toggleMain w / jQuery'代码块移动到“保存/加载”代码块之后,以便在设置图像的初始可见性之前预先检查复选框。

   So the order of your <script> tags will be

   所以

   a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   b) The script that uses jQuery. c) your save/load script that doesn't use jQuery.

   a)

   Actually, (b) and (c) can be in the same <script> but (a) must be separate.

   实际上,(b)和(c)可以在同一个

2. Add display:none to the <p> containing the images.

   将display:none添加到包含图像的

   中。

   • Is that what class="hidden" was intended to do? You could add .hidden { display: none; } to your CSS...

   这是什么类=“隐藏”是打算做的?你可以添加.hidden {display:none;你的CSS ......

#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();
}