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

@4castle Yes it should be input, sorry. When using your code, do I still need to put =true/false? — Kervvv
– Kervvv, Commented May 17, 2016 at 21:58

Ali Seyfollahi · Accepted Answer · 2018-02-07 12:17:50Z

84

It can be easier:

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

answered Feb 7, 2018 at 12:17

Ali Seyfollahi

2,9602 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Stragies · Accepted Answer · 2023-12-24 14:17:10Z

45

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 in formal boolean math ¬A ≡ A ^ 1.
(Read as: "Not(¬) A is equivalent(≡) to A XOR(^)ed with literal 1")

It also doesn't require using 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);

edited Dec 24, 2023 at 14:17

answered Sep 6, 2018 at 19:51

Alex Stragies

6537 silver badges13 bronze badges

4 Comments

Tom Rossi Over a year ago

Whoa! Never seen that before. What is that operator ^=?

Benjamin Carlsson Over a year ago

^ is the XOR operator; a ^ b is true if a and b have different values, or false otherwise. a ^= true (equivalent to a = a ^ true) evaluates to false if a is true and true if a is false.

Snow Over a year ago

While this "works", I don't think it's a good idea - using bitwise operators when not needed makes for less readable, more opaque code, as you can see by the first comment. It will confuse people. Readable code is more important than concise code, unless you're code golfing.

Alex Stragies Over a year ago

I disagree. Back in the day XOR was covered in the first week of CS. If "XOR 1" is "opaque" or "unreadable" to a non-beginner programmer, they should probably never go near any kind of performance, or security critical code.

IrkenInvader · Accepted Answer · 2018-09-24 14:29:12Z

7

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

edited Sep 24, 2018 at 14:29

answered May 17, 2016 at 21:39

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

8 Comments

Farside Over a year ago

It is a good practice to always use ===/!== instead of ==/!= when comparing to Boolean, or to perform type coercion manually only when you need to.

Luke3butler Over a year ago

In fact, the if statement inside the else statement is completely unnecessary. Just do inputs[i].checked = false; inside the else.

castletheperson Over a year ago

@Farside In this case they might as well use == to save bytes, because checked will always be a boolean. But yes, it is good practice.

IrkenInvader Over a year ago

I was actually planning on using triple equal as I wrote the opening sentence...not sure what happened.

Kervvv Over a year ago

Thank you. All of my checkboxes are toggling, except for the checkbox that initiates the toggling.

|

Matthew Montes de Oca · Accepted Answer · 2019-01-03 06:55:48Z

2

Another correct answer could be:

inputs[i].checked = input.checked ? false : true;

answered Jan 3, 2019 at 6:55

Matthew Montes de Oca

611 silver badge2 bronze badges

1 Comment

bprdev Over a year ago

I like this one. The answers with the ^= operator work, but not all developers will understand it. This pattern is more widely known.

SnowballsChance · Accepted Answer · 2019-05-14 22:58:52Z

0

I thought I would add to this since it led me to an answer I was seeking for checking all checkboxes with bookmarklet. Using the bitwise operator worked like a charm in IE 11 and Chrome. Haven't tried it in other browsers.

javascript:(function(){var chbxs=document.querySelectorAll('input');for(i in chbxs){chbxs[i].checked^=1;}})();

answered May 14, 2019 at 22:58

community wiki

SnowballsChance

Collectives™ on Stack Overflow

Toggle Checkbox using JavaScript

5 Answers 5

Comments

4 Comments

8 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related