HTML Checkboxes with Javascript Functions

Question

I'm just trying to get this checkbox to alert a message after it is checked and after it is unchecked by running a function in Javascript. I can get it to display the "checked" message but can't get the "unchecked" alert to come up.

<input type="checkbox" id="chbx" onchange="foo()">
<script type="text/javascript">
var checkbox = document.getElementById("chbx");

 function foo(){
   if(checkbox.checked=true){
       alert("Checked!");
         }
   else {
        alert("UnChecked!");
         }
    };
</script>

You need to use == or ===, as what you're doing is setting the value (true every time). The second form is best. (Nevermind, I see you edited out the incorrect syntax.) — Jared Farrish
– Jared Farrish, Commented Oct 27, 2012 at 17:52

Joe Enos · Accepted Answer · 2012-10-27 17:54:11Z

7

You've got single-equals instead of double-equals in your if statements:

if (checkbox.checked=true) {

should be

if (checkbox.checked == true) {

or just

if (checkbox.checked) {

answered Oct 27, 2012 at 17:54

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

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

Comments

Andre Meinhold · Accepted Answer · 2012-10-27 17:53:37Z

4

You are not comparing values using =. Needs to be at least ==, better ===

if(checkbox.checked === true) {}

or, simplified

if(checkbox.checked) {}

answered Oct 27, 2012 at 17:53

Andre Meinhold

5,3354 gold badges23 silver badges30 bronze badges

5 Comments

Andre Meinhold Over a year ago

@DanBarzilay: excuse me ? Why not, === just compares type AND value so its much more precise. Even if it makes no difference here, I just mentioned its "better".

Dan Barzilay Over a year ago

=== is for type and a boolean is a boolean it doesn't matter if its true or false.. it should be ==

Andre Meinhold Over a year ago

@DanBarzilay: I don't agree with you. Just for convinience === should always be used in this language to avoid crucial errors/confusion with types

Jared Farrish Over a year ago

@DanBarzilay - It can be. Crockford, for one, says always use ===. So it's not "wrong" or "bad" in this case, it just happens that both are equivalent and work in this situation.

Dan Barzilay Over a year ago

@JaredFarrish Sorry, my mistake.

Jankeesvw · Accepted Answer · 2012-10-27 18:11:30Z

2

You made the commonly made mistake of using a single = this actual sets the checkbox.checked to true. If you want to make a comparison make sure to use a double ==.

Also, there are only two options for a checkbox; so if it's not on it's off:

This is what I would have done:

<input type="checkbox" id="chbx" onchange="checkbox_changed()">
<script type="text/javascript">
    var checkbox = document.getElementById("chbx");

    function checkbox_changed() {
        if (checkbox.checked == true) {
            alert("Checked!");
        } else {
            alert("UnChecked!");
        }
    }
</script>

edited Oct 27, 2012 at 18:11

answered Oct 27, 2012 at 17:55

Jankeesvw

7108 silver badges18 bronze badges

1 Comment

Jared Farrish Over a year ago

You're making the same mistake the OP did with the condition (a single =).

Collectives™ on Stack Overflow

HTML Checkboxes with Javascript Functions

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related