复选框不是't检查到正确的值
Checkbox isn't checking to the correct value
我有应该是简单的代码,但由于某种原因,我没有了解正确设置复选框的逻辑有什么问题。我使用本地存储,以便在会话之间保持选中状态。
这是我的密码。由于某种原因,即使console.log
在应该为false时打印出false,或者在应该为true时打印出true,无论哪种方式,复选框都会被选中。
var checkboxElement = document.getElementById("checkbox").getElementsByTagName('input')[0]
checkboxElement.addEventListener('click', function() {
console.log(checkboxElement.checked)
if (localStorage != undefined) {
localStorage.setItem("checkbox", checkboxElement.checked)
}
});
if(localStorage != undefined)
{
console.log("Local storage supported.");
//set defaults
if (localStorage.getItem("checkbox") == undefined) {
localStorage.setItem("checkbox", false)
}
var isChecked = localStorage.getItem("checkbox")
checkboxElement.checked = isChecked
console.log(isChecked)
}
因为localStorage将值存储为字符串,所以当您有false
时,它实际上存储为'false'
,这是一个真实的值,所以即使取消选中复选框,它也会标记为已选中。
var isChecked = localStorage.getItem("checkbox") === 'true';
checkboxElement.checked = isChecked;
console.log(isChecked)
演示:Fiddle
检查底部的第三行。checkboxElement.checked
需要一个布尔值。如果没有提供布尔值,它会通过遵循一些规则将值强制为布尔值(很多时候这种转换/强制会产生奇怪的结果)。
isChecked
包含"true"/"false"(字符串形式)。我使用了一个三元运算符来生成字符串"true"/"false"的正确布尔表示。
var checkboxElement = document.getElementById("checkbox").getElementsByTagName('input')[0]
checkboxElement.addEventListener('click', function () {
console.log(checkboxElement.checked)
if (localStorage != undefined) {
localStorage.setItem("checkbox", checkboxElement.checked)
}
});
if (localStorage != undefined)
{
console.log("Local storage supported.");
//set defaults
if (localStorage.getItem("checkbox") == undefined) {
localStorage.setItem("checkbox", false)
}
var isChecked = localStorage.getItem("checkbox");
// .checked property needs boolean value. Thats why the following line is re-coded to produce a boolean.
checkboxElement.checked = isChecked === "false" ? false : true;
console.log(isChecked);
}
相关文章:
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- j查询检查复选框是否被选中,然后向输入字段添加值
- 检查复选框状态-Javascript
- JQuery:如何检查复选框是否被选中并向字段添加属性
- 如何检查复选框是否在特定表单中被选中
- 如何在HTML和JavaScript中检查复选框是否为真
- JavaScript 检查复选框是否被输入值禁用
- 如何使用 *jquery mmenu 插件*检查复选框是否处于选中状态
- 按使用 jquery 检查复选框的顺序显示文本
- Acrobat XI Pro:检查复选框的状态以影响计算
- AngularJS指令,用于检查复选框列表中是否至少选中了一个项目
- 检查复选框是否被选中(js/jquery)
- 如何在单击复选框之前检查复选框是否已选中
- 使用jsTree以编程方式检查复选框节点
- 单击复选框时检查复选框的选中状态
- 如何检查复选框是否被选中
- jQuery检查复选框是否被选中,并使用复选框's值,如果它's是空的
- jQuery-检查复选框值(链接jQuery函数与If Statment)
- 如何确保使用Javascript检查复选框
- 如何检查复选框是否与Protractor、CucumberJS和Chai一起选中