javascript : 如何在单个函数中处理多个复选框的更改事件处理程序并打印选中了哪个复选框

Question

描述

我有多个复选框，想在单个处理程序函数中处理所有复选框单击事件并想知道哪个 checked.i 在下面的代码中尝试过但没有工作

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#Checkbox1').addEventListener('change', changeHandler("Checkbox1"));
    document.querySelector('#Checkbox2').addEventListener('change', changeHandler("Checkbox2"));
    document.querySelector('#Checkbox3').addEventListener('change', changeHandler("Checkbox3"));
    document.querySelector('#Checkbox4').addEventListener('change', changeHandler("Checkbox4"));
    document.querySelector('#Checkbox5').addEventListener('change', changeHandler("Checkbox5"));
});
function changeHandler(checkboxs) {
    //Do Something...maybe another function showAlert(), for instance
    if (checkboxs.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>

Answer 1

您的代码的第一个问题是您在调用 changeHandler 而不是将其分配给侦听器。您可以通过将每个更改为一个匿名函数来解决此问题，该匿名函数又调用处理程序：

document.querySelector('#Checkbox1').addEventListener('change', () => changeHandler("Checkbox1"));

这将导致您遇到下一个问题，即您正在传递一个字符串，例如。 'Checkbox1'，但随后尝试检查是否直接在此字符串上检查元素，这将始终 return false ('Checkbox1'.checked === undefined)。要解决这个问题，您需要先使用传递的字符串来查询元素：

function changeHandler(checkboxs) {
    const checkbox = document.getElementById(checkboxs)
    
    if (checkbox && checkbox.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}

最终工作示例：

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#Checkbox1').addEventListener('change', () => changeHandler("Checkbox1"));
    document.querySelector('#Checkbox2').addEventListener('change', () => changeHandler("Checkbox2"));
    document.querySelector('#Checkbox3').addEventListener('change', () => changeHandler("Checkbox3"));
    document.querySelector('#Checkbox4').addEventListener('change', () => changeHandler("Checkbox4"));
    document.querySelector('#Checkbox5').addEventListener('change', () => changeHandler("Checkbox5"));
});

function changeHandler(checkboxs) {
    const checkbox = document.getElementById(checkboxs)

    if (checkbox && checkbox.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>

但是您可以通过使用事件委托来避免所有重复以及匿名函数的使用（请参阅 What is DOM Event delegation? 进行讨论）。单个侦听器附加到 document 并检查隐式传递的 event，在本例中为 type === 'checkbox'，如果它满足我们的条件，我们将对其进行操作。

document.addEventListener('DOMContentLoaded', function () {
  document.addEventListener('change', changeHandler);
});

function changeHandler(event) {
  if (event.target.type === 'checkbox') {
    if (event.target.checked) {
      console.log(`Checkbox with id: ${event.target.id} checked`);
    }
    else {
      console.log("Checkbox unchecked");
    }
  }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>

javascript : 如何在单个函数中处理多个复选框的更改事件处理程序并打印选中了哪个复选框

javascript : How to handle chage event handler for multiple checkbox in single function and print whick checkbox clicked

html

javascript

google-chrome-extension

google-chrome-app

描述