Toggle Checkbox using JavaScript

Question

I had this working, but I didnt save and cannot replicate. I am trying to toggle checkboxes using if else. What am I doing wrong.

What I thought would work:

function myForm() {
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].type == "checkbox") { 
            if(inputs[i].checked = false) {
                inputs[i].checked = true; 
            } else {
                if(inputs[i].checked = true) {
                    inputs[i].checked = false; 
                }   
            }
        }  
    } 
}

Answer 1

It can be easier:

inputs[i].checked = !inputs[i].checked;

Answer 2

How about using an operator, that is defined to toggle booleans using 1 as second operand?

inputs[i].checked ^= 1;

This uses the XOR Compound assigment operator, and it toggles booleans because ¬A ≡ A ^ 1.

It also doesn't require looking up inputs[i] a second time.

2020 update: You can also eliminate the for loop and all those vars by using the forEach function to iterate over the checkboxes, reducing your function body to:

document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked ^= 1);

Answer 3

Single equals is assignment, double/triple equals is for equality. You need to use double or triple equals in your if/else block.

    if(inputs[i].checked == false) {
        inputs[i].checked = true; 
    }
    else {
        if(inputs[i].checked == true) {
            inputs[i].checked = false; 
         }   
    }