Javascript 如何在单击复选框时输入和分配var以及修改对象属性？

您好，我正在开发一个函数来创建一个随机密码，我现在已经准备好了，但是我想改进一些代码，因为我使用了3个复选框来包含大写、数字和符号，所以我制作了一个eventListener来逐个设置复选框，但是我想如果我使用一个class to all复选框，我可以使用for（）要使用类在每个复选框上迭代，并添加例如data item=“caps”、data item=“nums”和data item=“syms”以获取该属性并将包含默认值的my object修改为true，当用户单击取消选中某个项时，请添加eventListener以调用my函数：

这是我的实际工作代码：

让chkboxUppercase=document.querySelector（'chkboxUppercase'）；
让chkboxNumbers=document.querySelector（“#chkboxNumbers”）；
让chkboxSymbols=document.querySelector（“#chkboxSymbols”）；
让配置={
赛姆斯：没错，
努姆斯：是的，
是的，
真的吗
}
chkboxUppercase.addEventListener（'change'，函数（e）{
config.caps=！config.caps；
generatePassword（）；
})
chkboxNumbers.addEventListener（'change'，函数（e）{
config.nums=！config.nums；
generatePassword（）；
})
chkboxSymbols.addEventListener（'change'，函数（e）{
config.syms=！config.syms；
generatePassword（）；
})
函数generatePassword（）{
//…我的功能在这里。。。
}

帽子
数字
象征

您可以使用

元素访问。数据集

：

const chkBoxes = document.querySelectorAll('.change-checkbox');

const handleChange = function (e) {
  const data = e.target.dataset.item;
  config[data] = e.target.checked;
  generatePassword();
}

chkBoxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', handleChange);
})

您可以使用

元素.dataset

进行访问：

const chkBoxes = document.querySelectorAll('.change-checkbox');

const handleChange = function (e) {
  const data = e.target.dataset.item;
  config[data] = e.target.checked;
  generatePassword();
}

chkBoxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', handleChange);
})

您试图设置config对象的“data”属性，而不是设置与checkbox属性对应的属性。更改以下行

 config.data = !config.data;

访问与数据值对应的属性

 config[data] = !config[data];

您试图设置config对象的“data”属性，而不是设置与checkbox属性对应的属性。更改以下行

 config.data = !config.data;

访问与数据值对应的属性

 config[data] = !config[data];

---

这只是一个一般性说明，但我鼓励使用

const

而不是

let

，除非您有很好的理由重新分配值。除此之外，我将使用

forEach

迭代这些元素，并仅使用该数据属性的值作为对象键，如下所示

const复选框=[…document.querySelectorAll（'.change checkbox'）]
常量配置={
赛姆斯：没错，
努姆斯：是的，
是的，
真的吗
}
复选框。forEach（复选框=>{
const item=checkbox.dataset.item
复选框.addEventListener（'change'，（）=>{
配置[项目]=！配置[项目]
generatePassword（）
})
})

只是一个一般性说明，但我鼓励在

let

上使用

const

，除非您有很好的理由重新分配值。除此之外，我将使用

forEach

迭代这些元素，并仅使用该数据属性的值作为对象键，如下所示

const复选框=[…document.querySelectorAll（'.change checkbox'）]
常量配置={
赛姆斯：没错，
努姆斯：是的，
是的，
真的吗
}
复选框。forEach（复选框=>{
const item=checkbox.dataset.item
复选框.addEventListener（'change'，（）=>{
配置[项目]=！配置[项目]
generatePassword（）
})
})

感谢您的回答我将您的更改放在我的代码上，得到了相同的结果，这里的问题是config.data在我的对象上插入了一个名为data的属性，而不是let data=。。。我编辑了答案来解决这个问题。括号语法将允许您以字符串形式访问对象属性。点符号不允许这样做。这是预期的效果。我试图使用配置访问数据。[数据]但正如你所说的那样，这不起作用，是的，我失去了那部分感谢的人！我已经对代码进行了一些重构。您应该使用输入元素的

checked

属性，而不是切换config属性。此外，最好不要在循环中定义函数。正如Jon DeWitt所说，我更喜欢您最终重构的代码，我感谢您的帮助，我会记住常量和处理程序的使用，再次感谢！谢谢你的回答，我把你的更改放在我的代码上，我得到了相同的结果，这里的问题是config.data在我的对象上插入了一个名为data的属性，而不是let data=。。。我编辑了答案来解决这个问题。括号语法将允许您以字符串形式访问对象属性。点符号不允许这样做。这是预期的效果。我试图使用配置访问数据。[数据]但正如你所说的那样，这不起作用，是的，我失去了那部分感谢的人！我已经对代码进行了一些重构。您应该使用输入元素的

checked

属性，而不是切换config属性。此外，最好不要在循环中定义函数。正如Jon DeWitt所说，我更喜欢您最终重构的代码，我感谢您的帮助，我会记住常量和处理程序的使用，再次感谢！你是对的，没有必要使用let，因为我不想重新评估这些值。。。我会记住的，非常感谢！总是乐于助人！你是对的，没有必要使用let，因为我不想重新评估这些值。。。我会记住的，非常感谢！总是乐于助人！