Question

由于某种原因，此代码无法正确获取复选框的checked属性，而是始终为false。我期望它显示是否已选中该复选框。我想念什么？谢谢

const clickArray = document.querySelectorAll("input")
const changeStyle = style => {
  return (() => console.log(style))
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', changeStyle(item.checked))
  }
)

<label for="chk1">
        <input type="checkbox" name="chk1" value="chk1">
        Bold
    </label>
<label for="chk2">
        <input type="checkbox" name="chk2" value="chk2">
        Italic
    </label>
<label for="chk3">
        <input type="checkbox" name="chk3" value="chk3">
        Underline
    </label> const click

Answer 1

已解决，在您的情况下，函数调用失去了上下文，当您使用事件侦听器时，请使用事件执行所有检查，而不是元素，因为它将把元素的旧上下文绑定到功能。

clickArray = document.querySelectorAll("input");
const changeStyle = style => {
  console.log(style);
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', function (e) { changeStyle(e.target.checked) })
  }
)

Answer 2

此元素：

<input type="checkbox" name="chk1" value="chk1">

将报告.checked = false，因为它没有属性checked。如果您想拥有.checked = true元素，则应该为

<input type="checkbox" name="chk1" value="chk1"  checked="checked">

注意：<input>中的type=checkbox没有使用属性value。因此，它被忽略。它对其.checked属性没有影响。

Answer 3

您可以尝试将 changeStyle（）包装在匿名函数的一侧：

var clickArray = document.querySelectorAll("input")
const changeStyle = style => {
  console.log(style);
}
clickArray.forEach(
    (item, index) => {
        item.addEventListener('click', function(){ changeStyle(this.checked)})
    }
)

<label for="chk1">
    <input type="checkbox" name="chk1" value="chk1">
    Bold
</label>
<label for="chk2">
    <input type="checkbox" name="chk2" value="chk2">
    Italic
</label>
<label for="chk3">
    <input type="checkbox" name="chk3" value="chk3">
    Underline
</label>

Answer 4

问题在于调用item.checked时会得到changeStyle，这是在添加事件侦听器时，而不是事件发生时。

不是将item.checked传递给changeStyle，而是传递item并让changeStyle获得checked属性。

const clickArray = document.querySelectorAll("input")
const changeStyle = element => {
  return (() => console.log(element.checked))
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', changeStyle(item))
  }
)

<label for="chk1">
        <input type="checkbox" name="chk1" value="chk1">
        Bold
    </label>
<label for="chk2">
        <input type="checkbox" name="chk2" value="chk2">
        Italic
    </label>
<label for="chk3">
        <input type="checkbox" name="chk3" value="chk3">
        Underline
    </label> const click

复选框.checked属性始终为false

4 个答案: