我有多个复选框。单击其背景颜色更改并将其值保存到本地存储。但是,刷新时不会保存背景颜色。如何将背景颜色更改保存到本地存储? 这是我正在使用https://jsfiddle.net/2m04prmz/2/
的示例代码HTML:
<input type="checkbox" class="faChkRnd" id="like9" ><label></label>
CSS:
.pincard-checked, pin p {
background-color: #2c3e50; color: #ffffff;transition: all 1s ease-out;border-top:2px solid #fff;
}
JS:控制突出显示
$(document).ready(function(){
$("#like").click(function () {
$("#pin").toggleClass("pincard-checked");
});
});
JS:将复选框值保存到本地存储
$('.faChkRnd').on('click', function() {
var fav, favs = [];
$('.faChkRnd').each(function() { // run through each of the checkboxes
fav = {
id: $(this).attr('id'),
value: $(this).prop('checked')
};
favs.push(fav);
});
localStorage.setItem("favorites", JSON.stringify(favs));
});
$(document).ready(function() {
var favorites = JSON.parse(localStorage.getItem('favorites'));
if (!favorites.length) {
return
};
console.debug(favorites);
for (var i = 0; i < favorites.length; i++) {
console.debug(favorites[i].value == 'on');
$('#' + favorites[i].id).prop('checked', favorites[i].value);
}
});
答案 0 :(得分:2)
在favorites[i].value
为true
for (var i = 0; i < favorites.length; i++) {
$('#' + favorites[i].id).prop('checked', favorites[i].value);
if(favorites[i].value) {
$('#' + favorites[i].id).closest(".pin").addClass("pincard-checked");
}
}
答案 1 :(得分:0)
为了更改复选框的背景,您可以使用以下代码,我还包括本地存储解决方案。
$(document).ready(function() {
$(".checkbox-wrapper label").on("click", function() {
$(this).closest(".checkbox-wrapper").toggleClass('selected');
var fav, favs = [];
$('.faChkRnd').each(function() { // run through each of the checkboxes
fav = {
id: $(this).attr('id'),
value: $(this).closest(".checkbox-wrapper").hasClass('selected')
};
favs.push(fav);
});
localStorage.setItem("favorites", JSON.stringify(favs));
});
var favorites = JSON.parse(localStorage.getItem('favorites'));
if (favorites != null && favorites.length !== 0) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].value == true) {
$('#' + favorites[i].id).closest(".checkbox-wrapper").addClass("selected")
$('#' + favorites[i].id).closest(".checkbox-wrapper faChkRnd").trigger("click");
}
}
}
});
.checkbox-wrapper-list li {
display: inline;
}
.checkbox-wrapper-list li label {
display: inline;
padding-left: 50px;
position: relative;
left: -19px;
}
.checkbox-wrapper-list li span {
position: relative;
display: inline;
width: 30px;
}
.checkbox-wrapper-list li span i {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
width: 14px;
height: 14px;
border: 1px solid #AEAEAE;
border-radius: 2px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #fff;
}
.checkbox-wrapper-list li.selected i {
background-color: #11a911;
box-shadow: none;
border-color: transparent;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="checkbox-wrapper-list">
<li class="checkbox-wrapper">
<span><i></i></span>
<label for="like1">Like 1</label>
<input name="your_checkbox[]" class="faChkRnd" id="like1" style="display: none;" type="checkbox">
</li>
<li class="checkbox-wrapper">
<span><i></i></span>
<label for="like2">Like 2</label>
<input name="your_checkbox[]" class="faChkRnd" id="like2" style="display: none;" type="checkbox">
</li>
<li class="checkbox-wrapper">
<span><i></i></span>
<label for="like3">Like 3</label>
<input name="your_checkbox[]" class="faChkRnd" id="like3" style="display: none;" type="checkbox">
</li>
</ul>
继续黑客攻击!