单击事件在 onclick 属性中正常工作，但不能作为 addeventlistener

Question

我遇到了一个有趣的问题，我觉得它应该很简单，但它让我感到难过。我试图简单地跟踪复选框的选中状态（如果选中，则启用按钮，如果未选中，则禁用按钮）。我遇到的问题是我似乎无法在事件侦听器中正确跟踪复选框的选中状态，但是如果我将它添加为 html 中的 onclick 属性并且我有不知道这是为什么。

具有 html onclick 属性的工作代码：

Html:

<input type='checkbox' name='check' id='consent' onclick='checkConsent()'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS:

const dialogConsentBtn = document.getElementById('consentBtn');
const consentCheck = document.getElementById('consent');

const checkConsent = () => {

  if (consentCheck.checked === true) {
    console.log('checked');
    dialogConsentBtn.disabled = false;
  } else {
    console.log('unchecked');
    dialogConsentBtn.disabled = true;
  }
}

带有事件侦听器的非工作代码：

HTML:

<input type='checkbox' name='check' id='consent'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS:

    const dialogConsentBtn = document.getElementById('consentBtn');
    const consentCheck = document.getElementById('consent');

    consentCheck.addEventListener('click', (event) => {
      event.preventDefault();
      if (consentCheck.checked === true) {
        console.log('checked');
        dialogConsentBtn.disabled = false;
        consentCheck.checked = true;
      } else {          
        console.log('unchecked');
        dialogConsentBtn.disabled = true;
        consentCheck.checked = false;
      }
    }, false);

在上面的（非工作）代码中，我得到以下行为：

复选框不会在视觉上选中或取消选中
console.log 总是打印出 'unchecked' 所以 if 条件是总是回归真实

我感觉浏览器处理这两件事的方式存在某种根本差异，这是我的困境的核心，但我似乎无法弄清楚那是什么。如有任何帮助，我们将不胜感激。

P.S。我还尝试在事件侦听器中使用 'change' 事件而不是点击事件来执行上述代码，但我遇到了同样的问题。

Answer 1

原因是 a) 您在 event.preventDefault() 复选框的事件中，这将阻止它被选中 b) 如果它被选中，您立即使用 consentCheck.checked = false 取消选中它。您对同意按钮也有相反的逻辑，因此您在选中复选框时禁用它，而在取消选中复选框时启用它。

因此，由于这两个原因无法选中第二个示例中的复选框，请参见下文：

const dialogConsentBtn = document.getElementById("consentBtn");
const consentCheck = document.getElementById("consent");

consentCheck.addEventListener(
  "click",
  (event) => {
    // event.preventDefault();
    if (consentCheck.checked === true) {
      console.log("checked");
      dialogConsentBtn.disabled = false; // was true
      // consentCheck.checked = false;
    } else {
      console.log("unchecked");
      dialogConsentBtn.disabled = true; // was false
      // consentCheck.checked = true;
    }
  },
  false
);

<input type="checkbox" name="check" id="consent" />
<label for="check">Lorem ipsum</label>
<button id="consentBtn" disabled>Agree</button>

Answer 2

与上面的答案一样，您通过调用 event.preventDefault() 方法来阻止默认操作。除此之外，您应该使用 onChange 事件而不是点击。

单击事件在 onclick 属性中正常工作，但不能作为 addeventlistener

Click event works correctly in onclick attribute but not as addeventlistener

javascript

checkbox

onclick

addeventlistener

checked