javascript checkbox basic

Question

I'm simply trying to get an alert that is the result of checking a box. I can't seem to isolate the check-event. it fires when I load the page eventhough I try to set the check property to false initially.

Looking it up got me to jquery and all that stuff but for my formal training in javascript I need to stick to javascript and get this down first (jquery wil be my next course).

here's the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <title>JavaScript Challenges</title>
    <script type="text/javascript">
    window.onload = function(){
   checkbox = document.getElementById("subscribe");
 checkbox.checked = false;


 if (checkbox.checked = true){
    alert("checked works");
    }

}

    </script>
  </head>
  <body>
    <form action="">
      <fieldset>

        <legend>Email subscriptions</legend>

        <p id="subscribepara">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe">
            Yes! I would like to receive the occasional newsletter via email.
          </label>
        </p>

        <p id="emailpara">
          <label>
            Email Address:
            <input type="text" name="email" id="email">
          </label>
        </p>

      </fieldset>
    </form>
  </body>
</html>

it's a javascript challenge from wikiversity btw. second part of the first challenge. first part where you need Hiding the email element with style.display ='none' worked fine.

David · Accepted Answer · 2011-02-08 12:21:37Z

2

It looks like it's firing because the comparison operator is broken:

if (checkbox.checked = true)

should be

if (checkbox.checked == true)

The version you have is essentially setting the checked state to true. This operation is successful, and therefore itself resolves to true (resulting in entering the conditional and seeing the alert).

Additionally, this code isn't going to fire when you manually check/uncheck the checkbox. This is running only once, when the page loads. One way to bind to the click event is to specify a function call in the markup for the checkbox.

It's considered better design not to do it in markup, but rather to separate the code and bind to events externally. But you'll get into that when you get into jQuery. Starting with the basics is fine.

answered Feb 8, 2011 at 12:21

David

221k42 gold badges245 silver badges337 bronze badges

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

1 Comment

David Over a year ago

@erickb: Should be. JavaScript is a little weird on primitive types to someone coming from a statically typed background (like me), but it should work.

Community · Accepted Answer · 2017-05-23 09:58:28Z

If you want an event to trigger after checking the checkbox, you should not bind it to window.onload, but the onchange event of the checkbox:

<script>
    var checkbox = document.getElementById('subscribe');
    checkbox.onchange = function() {
        if (checkbox.checked = true){
            alert("checked works");
        }
    }
</script>

Please note that the onchange event does not work the same way for Internet Explorer as other browsers. This is a different topic altogether, so if you want more info on that, take a look at this question.

Also note that the function above should be defined below the actual input element. If you include this sample in the <head>, it does not yet know of the existance of an element with the id subscribe and the JavaScript will fail. A better, more flexible alternative is to bind the event handlers after the DOM loads, but for the sake of brevity, I advise you to search SO or Google on this subject if you want more info :)

Andrzej Doyle · Accepted Answer · 2011-02-08 12:24:11Z

0

I think your approach is slightly off - importantly, you're not actually catching/handling events at all right now. Currently, when the page loads you look at the checkbox's checked state, possibly launching the alert. My understanding of the requirement is that you pop up an alert when the checkbox is changed to checked.

(And as David has pointed out, you're actually checking the tickbox inadvertently when you perform the check.)

What you want to do instead is register a listener for the checkbox's onchange event, which will execute some code every time the checkbox changes. Since it sounds like you want to learn this, I'll leave it there rather than giving some exact code. Take a look at this introduction to event handlers if you want some deeper reading about the what and the how (note that it's much more involved that you need for this particular case).

answered Feb 8, 2011 at 12:24

Andrzej Doyle

104k33 gold badges191 silver badges231 bronze badges

1 Comment

Immers Over a year ago

thanks for the link! the article started off very layman friendly but then got very confusing. Guess I need to get my head into some more examples.

Shakakai · Accepted Answer · 2011-02-08 12:24:35Z

0

In order for a function to be invoked by the action of checking a checkbox, you need to add an event listener to the checkbox. Here's how to do it:

// you have to do it inside the window.onload function so you know the DOM is available
window.onload = function(){
var checkbox = document.getElementById("subscribe");
checkbox.onchange = function(){
  if(checkbox.checked == true){
    alert('checked!');
  }
};
};

The "onchange" property is set to a function that will be called everytime the checkbox is changes state from checked to unchecked and vica versa. Inside that function, we check the value of checked and launch the alert when appropriate.

Hope that helps!

answered Feb 8, 2011 at 12:24

Shakakai

3,5642 gold badges18 silver badges18 bronze badges

Comments

user1921 · Accepted Answer · 2011-02-08 12:27:24Z

0

Check your comparison, checkbox.checked = true is an assignment. Research the onClick event

Since this is essentially homework, I'm not posting working code. You're close, and after reading some more you'll get it.

answered Feb 8, 2011 at 12:27

user1921

Comments

erickb · Accepted Answer · 2011-02-08 12:36:47Z

0

You could use a function and trigger it via an onclick event. This way you could reuse it too on other checkboxes.

# js
function alert_on_checked(elementId) {
  var checkbox = document.getElementById(elementId);
  if(checkbox.checked) {
    alert('checked works!');
  }
}

# html
...
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" >
...

answered Feb 8, 2011 at 12:36

erickb

6,3094 gold badges27 silver badges19 bronze badges

1 Comment

Immers Over a year ago

Interesting. I wonder though what the deal is with placing the event handler in the HTML element. My course can't stop screaming on how things like placing script in elements is invasive.

Collectives™ on Stack Overflow

javascript checkbox basic

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related