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

Posted 2023-05-07

【中文标题】保存复选框值会导致显示/隐藏链接图像出现问题

【英文标题】：Saving checkbox values causes issues with showing/hiding linked image

【发布时间】：2016-05-24 12:11:57

【问题描述】：

我编写了一个代码来根据相应复选框的值显示或隐藏图片。如果将“checked="checked"' 写入复选框，我可以在重新加载时显示或隐藏图片。

我能够编写代码来保存复选框的值，但随后图片不再与选中/未选中的值绑定，并随着重新加载而改变。

我的最终目标是选中复选框以显示图片，未选中复选框以隐藏图片，我需要保存的值以允许在进行更改后重新加载正确的值。

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

我还应该提到，这最终将用于 SharePoint 网站，如果这有所作为的话。

提前感谢您的帮助！！

（底部有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"  src="red.jpg"   />
</p>
</a>
<a href="home2.aspx">
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A2R2"  src="green.html"   />
</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>

查询：

<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

【问题讨论】：

所以你说，你有大约 64 个 checkboxes 对吗？你要为所有64 复选框写这个localStorage.getItem 和setItem 吗？另外，给checkboxes 的ids 是唯一的吗？

@piran 是的，会有 64 个盒子。他们都有不同的ID。 （A1G-A8G、B1G-B8G...H1G-H8G）。现在我的计划是对所有 64 张和所有 64 张图片使用 localStorage。如果您需要了解我在做什么，可以去here 查看背景照片。我将用文字覆盖Red 框

【参考方案1】：

这似乎解决了它：http://jsfiddle.net/w0yL5njs/

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

所以你的<script>标签的顺序是

a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> b) 使用 jQuery 的脚本。 c) 不使用 jQuery 的保存/加载脚本。

实际上，(b) 和 (c) 可以在同一个<script> 中，但 (a) 必须分开。

将display:none 添加到包含图像的<p>。

这就是class="hidden" 的意图吗？您可以将 .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();

【讨论】：

toggle 总是从以前的状态应用，但是当它被选中时，你需要 show() 总是所以去 show() 而不是 toggle()