首页 文章

checkbox .checked属性始终为false

提问于
浏览 次
0

由于某种原因，此代码未正确获取复选框的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
javascript addeventlistener checked

4 回答

  • 1

    问题是，当您调用 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
    回复于
  • 3

    这个元素：

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

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

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

    注意： <input> 的 <input> 没有使用属性 value . 因此，它被忽略了 . 它对 .checked 属性没有影响 .

    回复于
  • 2

    您可以尝试在匿名函数的一侧包装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>
    回复于
  • 1

    SOLVED ，在你的情况下，函数调用正在丢失上下文，当你使用eventlisteners时，使用event来执行任何检查，而不是元素，因为它会将元素的旧上下文绑定到函数 .

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

相关问题