复选框 .checked 属性始终为 false

Question

出于某种原因，此代码无法正确选中复选框的属性，而是始终为 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

这个元素：

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

会报告.checked = false，因为它没有属性checked。如果你想要 .checked = true 元素应该是

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

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

没有影响

Answer 2

已解决，在你的情况下，函数调用正在失去上下文，当你使用事件监听器时，使用事件来执行任何检查，而不是元素，因为它会绑定旧的函数的元素上下文。

clickArray = document.querySelectorAll("input");
const changeStyle = style => {
  console.log(style);
}
clickArray.forEach(
  (item, index) => {
    item.addEventListener('click', function (e) { changeStyle(e.target.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

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

不是将 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

checkbox .checked property always false

javascript

addeventlistener

checked

复选框 .checked 属性 始终为 false

checkbox .checked property always false

javascript

addeventlistener

checked

复选框 .checked 属性始终为 false