How to display alert boxes based on if a check box is checked or not using Javascript

Question

I am trying to make it so that if the checkbox on our page is checked it will display an alert message notifying the user they have opted in to showing their checkout history. If the user deselects the check box then it should show another alert box letting them know they are opting out of showing their checkout history. I am having trouble just displaying alert boxes if the check box is even checked/unchecked. Here is my code.

HTML

<div class="myAccountCheckboxHolder" id="showCheckoutHistoryCheckbox">
    <input tabindex="40" checked="checked" id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox">
        <label for="showCheckoutHistory" class="checkLabel">Show my checkout history</label>
    </div>

Javascript

function validate() {
    var checkoutHistory = document.getElementById('showCheckoutHistory');
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }

Thank you.

Hey, if you are already using jQuery in your site, as is suggested by the jQuery tag in the question, you should consider using @Jacek's answer instead of mine, as his makes proper use of the library. — Scotty C., Feb 07 '14 at 18:34
Possible duplicate of [Check if checkbox is checked JavaScript](https://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript) — Jacek Kowalewski, Dec 08 '17 at 18:56

Jacek Kowalewski · Accepted Answer · 2018-01-04T14:49:33.117

jQuery (original answer)

jQuery(document).ready(function() {
    jQuery('#showCheckoutHistory').change(function() {
        if ($(this).prop('checked')) {
            alert("You have elected to show your checkout history."); //checked
        }
        else {
            alert("You have elected to turn off checkout history."); //not checked
        }
    });
});

Documentation here: http://api.jquery.com/prop/

JavaScript (2018 update)

It is worth to notice, that you don't need any javascript libraries to acomplish that.

// Check current state and save it to "checked" variable
var checked = document.getElementById("showCheckoutHistory").checked; 

// Set state manually (change actual state)
document.getElementById("showCheckoutHistory").checked = true; // or
document.getElementById("showCheckoutHistory").checked = false;

For more pure javascript solutions I recommend vanilla.js: http://vanilla-js.com/ framework ;)

Thank you this is working perfectly. Thank you for providing documentation as well so I can learn how you did it as well. :) — r.doleano, Feb 07 '14 at 20:13

score 8 · Answer 2 · answered Feb 07 '14 at 18:10

8

So for checkbox changes I use the change listener that jQuery provides. So make your javascript this:

$("#showCheckoutHistory").change(function(event){
    if (this.checked){
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
});

Here it is as a working fiddle.

answered Feb 07 '14 at 18:10

Andy Novocin

454
3
14

This should be inside document.ready function. And I was first ;). But You've got fiddle... Hmmm :). – Jacek Kowalewski Feb 07 '14 at 18:14
It's ok to assume that code is wrapped properly. In fact I prefer not to specify: it might be inside of some giant app or a function which is only true on a single sub page. No need to obfuscate the programming message with undesired minutia. I would have deleted my post once I saw yours but thought that `this.checked` is more elegant than `$(this).prop("checked")` so I left it up. Life is short. – Andy Novocin Feb 07 '14 at 18:34
No problem. +1 from me. – Jacek Kowalewski Feb 07 '14 at 19:57

score 5 · Answer 3 · answered Feb 07 '14 at 18:15

5

Here's a working version without jQuery. Actually your code worked pretty well once the function had a closing brace. I just added in an event listener for you and moved the checkoutHistory var outside the function.

var checkoutHistory = document.getElementById('showCheckoutHistory');
checkoutHistory.onchange = function() {
    console.log(checkoutHistory);
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
}

And here's the JSFiddle I used. http://jsfiddle.net/aaFe5/

answered Feb 07 '14 at 18:15

Scotty C.

744
4
16

At some point you may wish to use event binding methods instead of assigning the event function directly. This [page](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) explains it pretty well, along with the differences between browsers. – Scotty C. Feb 07 '14 at 18:19
"The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code." There is document.ready missing. My answer is better, and I was first ;). – Jacek Kowalewski Feb 07 '14 at 18:21
@Jacek He is not using jQuery, and it would not be wise in my opinion to include an entire library for one event listener. – Scotty C. Feb 07 '14 at 18:23
OK. There is a jquery tag in question - so I thought he is using it. Sorry about that :). +1 – Jacek Kowalewski Feb 07 '14 at 18:24
Hmm, I didn't see the jQuery tag. Maybe he is using it, in which case your code is better because it's actually making use of the library. I'll comment on the original question suggesting he use yours if in fact he is using jQuery. Sorry for dumping on your answer if you were right. :P – Scotty C. Feb 07 '14 at 18:32
Oh, no problem :). The really important thing is to help, no matter who :). Best regards :). – Jacek Kowalewski Feb 07 '14 at 19:56
Thank you both for your answers, both extremely helpful. Made Jacek's the accepted answer so when someone else searches for it they see the proper jQuery answer but wanted to thank you as well since this answer is also a working JS solution. – r.doleano Feb 07 '14 at 20:13

score 0 · Answer 4 · edited Apr 28 '22 at 03:07

0

$(document).ready(function(){
  $("input:checkbox").change(function(){

    var dynamicId = this.id;

    let checkBoxtoggle = $("#"+this.id)[0].checked;

    if(checkBoxtoggle!==false){
      alert("done");
    }else{
      alert("not");
    }
  });
});

edited Apr 28 '22 at 03:07

oguzhancerit

1,436
1
16
27

answered Apr 26 '22 at 08:56

Swati Chanana

1
1

How to display alert boxes based on if a check box is checked or not using Javascript

4 Answers4