[英]How to output responses based on checkbox values stored in an array?
I have persistent checkboxes which represent the days of the week. 我有代表各个星期几的固定复选框。 I was able to store these values in
localStorage
in an array so that they stay after refresh. 我能够将这些值存储在数组中的
localStorage
中,以便在刷新后保持不变。
What I want to know is how can I output "Weekday" or "Weekend" based on the selection of the days? 我想知道如何根据选择的日期输出“工作日”或“周末”? For example a user selects "Monday" and "Wednesday" and the ouput is "Weekday"
例如,用户选择“星期一”和“星期三”,而输出则是“星期几”
I've tested it out using cases but was unsuccessful with applying that with the values from localStorage
. 我已经使用案例进行了测试,但是无法将其与
localStorage
的值一起使用。 Is there something wrong with how I've stored my values in the array? 我如何将值存储在数组中有什么问题吗?
Here is my codepen . 这是我的codepen 。
My function for storing and keeping the values checked: 我用于存储和保持值检查的功能:
function updateStorage() {
$checkboxes.each(function() {
formValues[this.id] = this.checked;
});
localStorage.setItem("formValues", JSON.stringify(formValues));
}
$checkboxes.on("change", function() {
updateStorage();
});
// On page load
$.each(formValues, function(key, value) {
$("#" + key).prop('checked', value);
});
Here's the issue. 这是问题。 Once written to Localstorage, you need to remove the item in order to re-write it
写入本地存储后,您需要删除该项目才能重新写入
//checkbox
//function for persistent checkbox
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-wrapper :checkbox");
function updateStorage(){
$checkboxes.each(function() {
formValues[this.id] = this.checked;
});
localStorage.removeItem('formValues');
localStorage.setItem("formValues", JSON.stringify(formValues));
}
$checkboxes.on("change", function(){
updateStorage();
});
// On page load
$.each(formValues, function(key, value) {
$("#output").html($("#output").html() + key + ": " + value + "<br/>")
});
I updated your code in codepen with above and it works. 我使用上述代码更新了Codepen中的代码,并且可以正常工作。
Here is a function that will check your days object and return an object with 2 boolean properties ( isWeekDay
and isWeekendDay
): 这是一个将检查您的days对象并返回具有2个布尔属性(
isWeekDay
和isWeekendDay
)的对象的isWeekendDay
:
function checkweekday(days) {
console.log('days', days);
var weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
var weekendDays = ['saturday', 'sunday'];
var isWeekDay = false;
var isWeekendDay = false;
for (var day in days) {
if (days[day]) {
if (day) {
if (weekDays.indexOf(day) > -1) {
isWeekDay = true;
}
if (weekendDays.indexOf(day) > -1) {
isWeekendDay = true;
}
}
}
}
return {
isWeekDay: isWeekDay,
isWeekendDay: isWeekendDay
}
}
After retrieving values from localStorage, call the function with the object. 从localStorage检索值后,使用对象调用函数。
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var check = checkweekday(formValues);
console.log(check);
Here is an updated plunkr . 这是更新的plunkr 。
I hope you mean something like this 我希望你的意思是这样的
//checkbox
//function for persistent checkbox
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-wrapper :checkbox");
function outputResult(isWeekday,isWeekend){
var output = ""
if( isWeekday && isWeekend ) output = "Both";
else if( isWeekday ) output = "Weekday";
else if( isWeekend ) output = "Weekend";
document.getElementById("output").innerHTML = output;
}
function checkDay(){
var isWeekday = false;
var isWeekend = false;
$checkboxes.each(function(){
if( this.checked ){
if( this.id == "saturday" || this.id == "sunday" ) isWeekend = true;
else isWeekday = true;
}
});
outputResult(isWeekday,isWeekend);
}
function updateStorage(){
$checkboxes.each(function(){
formValues[this.id] = this.checked;
});
localStorage.setItem("formValues", JSON.stringify(formValues));
checkDay();
}
$checkboxes.on("change", function(){
updateStorage();
});
// On page load
$.each(formValues, function(key, value) {
$("#" + key).prop('checked', value);
});
https://codepen.io/anon/pen/gepomY?editors=1011 https://codepen.io/anon/pen/gepomY?editors=1011
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.