Question

我可以通过一个例外来获得跟随代码的工作方式。当我选中复选框时，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>

谢谢！

Answer 1

是否需要实际刷新页面？看起来你正在使用AJAX。

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

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

JavaScript部分如下

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

event.preventDefault()会阻止页面重新加载，这应该保留元素的背景颜色。

Answer 2

一个选项是使用jquery检查加载，然后突出显示当前选中的框。

＆＃13;

CreateKeyW(..)  { unicode implementation }
CreateKeyA(..) { byte string implementation }
#ifdef UNICODE
#define CreateKey CreateKeyW
#else
#define CreateKey CreateKeyA
#endif

＆＃13;

$('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';
  }
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用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';  
}

Answer 4

您可以使用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>

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

4 个答案: