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

我有以下代码片段

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")
}

---

非常感谢您在这种情况下提供的任何帮助。

您可以使用您已经获得的参考来定义是否应选中它并绑定事件：

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);  

var复选框=“”；
document.getElementById（'container'）.innerHTML=checkbox；
复选框=document.getElementById（“完成”）；
checkbox.checked=false；
checkbox.onclick=toggleCheckbox.bind（这个）；

我将我的代码改成了这个，它就可以工作了

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)
  }
}

函数createTable（channelArr，id）{
console.log（channelArr）
var table=document.getElementById（“channelsTable”）；
对于（i=0；icheckClicked（inverseIndex）；
if（channelArr[i].members.indexOf（id）！=-1）{
checkbox.checked=true
}
单元格2.appendChild（复选框）
}
}

复选框只有两种状态，因此更改事件实际上没有意义。试着检查它是否被选中可能是一个范围问题，但是很难说我们是否看不到显示JS加载位置和方式的标记。另外，更改处理程序设置在哪里？@Connum我将这两个函数都放在文件的全局中。我也试着把它移到彼此的内部，但我还是犯了同样的错误。是否有其他方法检查复选框“单击”事件？您必须密切注意显示给您的错误消息。它清楚地表明您的click事件正在触发，但找不到回调函数。同样，如果没有完整的代码示例，很难为您提供帮助。在更新选中状态之前，不会调用更改事件处理程序。查看这篇文章以获得更详细的解释。

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)
  }
}