How do you create onchange event for checkbox in javascript?

Question

I have the following snippets of code.

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

Each checkbox in table has an onchange handler (toggleCheckbox). However, when I tried clicking on the checkbox I get the following error.

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

Any help on this situation would be greatly appreciated.

Checkboxes only have two states, so a change event doesn't really make sense. Try just checking if it's checked — Cruiser, Feb 11 '17 at 23:07
Probably a scope issue, but hard to tell if we can't see the markup showing where and how your JS is loaded. Also, where's the change handler being set? — Constantin Groß, Feb 11 '17 at 23:07
@Connum I put both functions in global of the file. I've also tried moving it inside of each other as well and I still got the same error. Is there another way of checking for checkbox "clicked" event? — ndduong, Feb 11 '17 at 23:09
You have to pay close attention to error messages that are shown to you. It states clearly that your click event is triggering, but it cannot find the callback function. Again, without a complete code example, it's hard to help you. — Constantin Groß, Feb 11 '17 at 23:11
The change event handler isn't called until the checked state has been updated. Check this post for more detailed explanation.http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events# — Hameed Syed, Feb 12 '17 at 04:00

score 1 · Accepted Answer · answered Feb 12 '17 at 16:00

I changed my code to this and it works.

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

score 0 · Answer 2 · answered Feb 12 '17 at 03:34

You can use the reference you already got to define if it should be checked and bind the event:

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

How do you create onchange event for checkbox in javascript?

2 Answers2