你如何在javascript中为复选框创建onchange事件？答案

【问题标题】：How do you create onchange event for checkbox in javascript?你如何在javascript中为复选框创建onchange事件？
【发布时间】：2017-06-30 03:39:35
【问题描述】：

我有以下 sn-ps 代码。

function createTable(channelArr, id) {
  console.log(channelArr)
  var table = document.getElementById("channelsTable");
  for (i = 0; i < channelArr.length; i++) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    let inverseIndex = channelArr.length - 1 - i
    cell1.innerHTML = "# " + channelArr[inverseIndex].name
    var checkbox = '<input type="checkbox" onclick="toggleCheckbox()" id="complete" checked="false">';
    cell2.innerHTML = checkbox
    if (channelArr[i].members.indexOf(id) != -1) {
      document.getElementById("complete").checked = true;
    }
  }
}

function toggleCheckbox() {
  console.log("clicked")
}

表格中的每个复选框都有一个 onchange 处理程序 (toggleCheckbox)。但是，当我尝试单击复选框时，出现以下错误。

Uncaught ReferenceError: toggleCheckbox is not defined at HTMLInputElement.onclick (pick_channels?token=...)

对于这种情况的任何帮助将不胜感激。

【问题讨论】：

复选框只有两种状态，所以更改事件没有任何意义。试着检查它是否被选中
可能是范围问题，但很难判断我们是否看不到显示 JS 加载位置和方式的标记。另外，更改处理程序设置在哪里？
@Connum 我将这两个函数都放在文件的全局中。我也尝试过将它相互移动，但我仍然遇到同样的错误。还有另一种检查复选框“点击”事件的方法吗？
您必须密切注意显示给您的错误消息。它清楚地表明您的点击事件正在触发，但它找不到回调函数。同样，如果没有完整的代码示例，很难为您提供帮助。
在检查状态更新之前不会调用更改事件处理程序。查看这篇文章以获得更详细的解释。stackoverflow.com/questions/4471401/…

标签： javascript

【解决方案1】：

您可以使用已经获得的引用来定义是否应该检查并绑定事件：

var checkbox = '<input type="checkbox" id="complete" checked="false">';
document.getElementById('container').innerHTML = checkbox;
checkbox = document.getElementById("complete");
checkbox.checked = false;
checkbox.onclick = toggleCheckbox.bind(this);

【讨论】：

【解决方案2】：

我把我的代码改成了这个，它可以工作。

function createTable(channelArr, id) {
  console.log(channelArr)
  var table = document.getElementById("channelsTable");
  for (i = 0; i < channelArr.length; i++) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    let inverseIndex = channelArr.length - 1 - i
    cell1.innerHTML = "# " + channelArr[inverseIndex].name
    var checkbox = document.createElement("INPUT");
    checkbox.type = "checkbox";
    checkbox.onchange = () => checkClicked(inverseIndex);
    if (channelArr[i].members.indexOf(id) != -1) {
      checkbox.checked = true
    }
    cell2.appendChild(checkbox)
  }
}

【讨论】：