Условное выделение метки флажка после получения состояния из хранилища

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-объектом, содержащим ключ => id и значение => значение флажка (true | false). Поэтому вы должны проверить, установлено ли значение == true, а затем установить для этого параметра CSS.

Моя коррекция здесь jsfiddle:

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); 
 
    if(value){ 
 
    \t $("#" + key).parent('label').css('background', 'yellow'); 
 
    } 
 
    
 
});

<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>