Question

我的代码会将复选框的选中状态分配给本地存储，然后使用此tutorial在“页面加载”中检索它们。

教程示例有效，但我想更进一步，根据是否选中复选框状态，执行有条件地设置复选框标签背景颜色的附加任务。

我尝试添加以下内容来替换jQuery的最后一行，但它只是突出显示了所有复选框。

$("#" + key).prop('checked', value).parent('label').css('background', 'yellow');

这是fiddle。因此，在该示例中，如果它按照我的描述工作，如果我点击挪威，挪威将以黄色突出显示。

有什么建议吗？

<div id="checkbox-container">
<label>
<input type="checkbox" id="UN40" value="Austria" />Austria</label>
<label>
<input type="checkbox" id="UN246" value="Finland" />Finland</label>
<label>
<input type="checkbox" id="UN579" value="Norway" />Norway</label>
</div>

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function() {
    $checkboxes.each(function() {
        checkboxValues[this.id] = this.checked;
    });
    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
    $("#" + key).prop('checked', value);
});

Answer 1

将最后一行更改为：

$("#" + key).prop('checked', value).parent('label').css('background', value?'yellow':'');

jsfiddle：https://jsfiddle.net/525a2ofn/5/ （代码段不允许 localStorage ）

这使用ternary operator：

如果value为TRUE，则background设置为'yellow'。
如果value为FALSE，则background设置为'' （空），有效地将其设置为默认值。

Answer 2

我可以看到你正在使用每个函数，json对象包含key =＆gt; id和value =＆gt;复选框的值（true | false）。所以你必须检查value == true 为该复选框设置css样式。

我在此更正jsfiddle：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkbox-container">
  <label>
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label>
    <input type="checkbox" id="UN246" value="Finland" />Finland</label>
  <label>
    <input type="checkbox" id="UN579" value="Norway" />Norway</label>
</div>

AVPlayer

从存储中获取状态后，有条件地突出显示复选框标签

2 个答案: