切换复选框 div 或标签的背景颜色答案

【问题标题】：Toggle background color of checkbox div or label切换复选框 div 或标签的背景颜色
【发布时间】：2017-02-05 14:08:12
【问题描述】：

我可以让以下代码按照我想要的方式工作，但有一个例外。当我选择复选框时，div 的背景颜色会从 #fff 更改为 #ffe600。我遇到的问题是提交表单并刷新页面时，背景颜色会恢复为#fff。我希望在提交表单后刷新页面时背景颜色保持#ffe600。页面刷新后复选框仍处于选中状态，但 div 背景颜色恢复为#fff。有谁知道刷新页面时是否可以保持 div 背景颜色#ffe600。这真是被难住了。

function myFunction(x, _this) {
  if (_this.checked) {
    x.style.backgroundColor = '#ffe600';
  } else  {
    x.style.backgroundColor = '#fff';
  }
}

#product1 {
  background-color: #fff;
  padding: 3px 5px 3px 7px;
  margin-top: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
  <label class="chk">
    <input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>

谢谢！

【问题讨论】：

localStorage 应该可以工作
通常使用 cookie 或存储复选框状态的文件来执行您想要的行为。
或者只使用 .ajax 提交表单并完全避免刷新。 api.jquery.com/jquery.ajax
@achref 听起来复选框状态已经持续存在。但是背景颜色没有在页面加载时初始化。 “该复选框在页面刷新后仍处于选中状态，但 div 背景颜色恢复为 #fff ...”。没有？
@achref 是的，这就是我的意思。复选框保持选中状态，但还没有任何代码可以根据这些状态设置初始背景颜色。

标签： javascript jquery html css checkbox

【解决方案1】：

您可以使用 jquery 创建一个函数，该函数可用于在加载文档和单击复选框时进行复选框验证和格式化。

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var setColor = function(){
        if($("#select_product").is(":checked")) $("#product1").css("background-color", "#ffe600");
        else $("#product1").css("background-color", "#fff");
    }
    $(document).ready(function(){
        setColor();
        $("#select_product").click(setColor);
    });
</script>
<div id="product1">
    <label class="chk">
    <input type="checkbox" id="select_product" value="Y">Label goes here.</label>
</div>
</body>
</html>

【讨论】：

您好 Mikołaj，非常感谢您在这方面的帮助！我已经尝试过您的代码，并且在单击包含复选框的 div 时它可以正常工作。选中复选框后，有没有办法可以使这项工作？
验证复选框选择并相应地为 div 着色的函数在两个地方调用：加载文档时和单击复选框时。所以它应该按照你的期望工作。我在 Firefox 中测试了这种行为。请让我知道它在您的环境中的表现。
这很奇怪。一定有什么东西干扰了代码。？当我选择复选框时，它不会影响 id="product1" 的 div 的背景颜色。 bg 颜色仅在选择标签或 div 时更改。我已经在 jsfiddle 中尝试了上面的代码，效果很好。它只是在我的页面上不起作用。我希望我可以向您展示该页面，但它位于开发服务器上。
我刚刚尝试将上面的代码添加到表单标签之外的页面中，它可以工作。当我单击 div 或复选框时，div 会改变颜色。不过我不确定这意味着什么。？
所以 div 或 label 的行为方式与 checkbox 相同？也许元素的 ID 相互交换？

【解决方案2】：

您可以使用localstorage 或Cookie 来存储复选框的状态，稍后在页面加载时您可以从它们那里获取状态，或者您可以在页面加载时执行与myFunction 相同的检查，如下所示：

window.onload = function(){
 var checkBoxEle = document.querySelector("div#product1 input[type='checkbox']");

 var productEle = document.getElementById("product1"); 
 if (checkBoxEle.checked) {
    productEle.style.backgroundColor = '#ffe600';
  } else  {
    productEle.style.backgroundColor = '#fff';  
}

【讨论】：

【解决方案3】：

一种选择是使用 jquery 检查负载，然后突出显示当前选中的框。

$('input[type=checkbox]').each(function(){
  if($(this).is(':checked'))
$(this).parent().parent().css('backgroundColor','#ffe600');
  else
$(this).parent().parent().css('backgroundColor','#fff');
});
function myFunction(x, _this) {
  if (_this.checked) {
    x.style.backgroundColor = '#ffe600';
  } else  {
    x.style.backgroundColor = '#fff';
  }
}

#product1 {
  background-color: #fff;
  padding: 3px 5px 3px 7px;
  margin-top: 6px;
}
#product2 {
  background-color: #fff;
  padding: 3px 5px 3px 7px;
  margin-top: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
  <label class="chk">
    <input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>
<div id="product2">
<label class="chk">
<input checked type="checkbox" onChange="myFunction(product2, this)" name="select_product2" value="V" />Label goes here 2.</label>
</div>

【讨论】：

【解决方案4】：

是否需要实际刷新页面？您好像在使用 AJAX。

您是否使用函数来处理表单的提交？因为那么您可以执行以下操作来防止页面重新加载

<form onsubmit="submitFunction(event)">
      // form elements
</form>

JavaScript 部分如下所示

function submitFunction(event) {
    event.preventDefault();
    // form data processing
}

event.preventDefault() 将阻止页面重新加载，从而保持元素的背景颜色。

【讨论】：