主页 / 问题 / 977111
Accepted
Дмытрык
Asked:2020-05-02 16:13:18 +0000 UTC2020-05-02 16:13:18 +0000 UTC

跟踪通过js更改的复选框的更改

  • 772

您需要跟踪复选框状态的变化，以防使用 JS 更改此状态。没想到，我发现在这样的条件下，事件change并没有发出

const checkbox = document.getElementById('box');
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
  checkbox.checked = !checkbox.checked;
})
checkbox.addEventListener('change', ()=>{
  console.log("Состояние чекбокса изменнено")
})
 <input id='box' type="checkbox">
<button id="btn">Click</button>

javascript

2 个回答

  1. Best Answer

    您可以checked使用Object.defineProperty覆盖属性的设置器。

    Object.defineProperty(checkbox, 'checked', {
    set: a => a != checkbox.checked && checkbox.click()
});

    一般来说，在一般情况下，是无法访问html元素的原型的，但这里竟然是作弊拉click取条件，结果如下

    const checkbox = document.getElementById('box');
checkbox.addEventListener('change', () => {
  console.log("Состояние чекбокса изменнено")
})

document.querySelectorAll('input[type="checkbox"]')
  .forEach(cb => Object.defineProperty(cb, 'checked', {
      set: a => a != cb.checked && cb.click()
  }));
    <input id='box' type="checkbox">
<button id="btn" onclick="checkbox.checked = checkbox.checked">No change</button>
<button id="btn" onclick="checkbox.checked = !checkbox.checked">change</button>

    • 4 

  2. const checkbox = document.getElementById('box');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  checkbox.checked = !checkbox.checked;
  check(checkbox);
})

function check(el) {
  if (el.checked) {
    console.log("Флажок установлен");
  } else {
    console.log("Флажок не установлен");
  }
}
    <input id='box' type="checkbox">
<button id="btn">Click</button>

    • -1

相关问题