状態をストレージから取得した後、条件付きでチェックボックスのラベルを強調表示する

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 => idとvalue =>チェックボックスの値（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>