Get state of checkbox using javascript

Question

I'm trying to write a javascript with jquery which should be able to pick out and use information on if a checkbox is checked or not. This should happen every time the checkbox(has id 'edit-toggle-me') is clicked. I've written a test function for this with some alert() in it to see if I've succeeded or not.

(function ($) {
    "use strict";
    $(document).ready(function () {

        $('#edit-toggle-me').click(function(){

            if ($('#edit-toggle-me').checked()) {
                alert('Yup!');
            }
            else {
            alert('Nup!');
            }


        });
    });

})(jQuery);

It perform neither of the alerts so I'm guessing it crashes at $('#edit-toggle-me').checked(). I don't know why though.

I've also tried this:

(function ($) {

    $(document).ready(function () {

        $('#edit-toggle-me').click(function(){
            var elementy = document.getElementById('edit-toggle-me');
            var check = elementy.value;
            alert(check);
            if(elementy.checked()) {
                alert('yup');
            }
        });
    });
})(jQuery);

The first alert works, but neither or the last two 'yup' or 'nup'.

And then I also tried this:

(function ($) {

     $(document).ready(function () {

        $('#edit-toggle-me').click(function(){

            var element2 = document.getElementById('edit-toggle-me');
            var check = element2.value;
            alert(check);

        });
    });
   })(jQuery);

This always return 1. Which I don't understand why either.

Grateful for any hints.

Amazing you were even allowed to ask this megaFAQ

mplungjan
– mplungjan

2012-08-13 13:30:23 +00:00
Commented Aug 13, 2012 at 13:30 — mplungjan
– mplungjan, Commented Aug 13, 2012 at 13:30

user657496 · Accepted Answer · 2012-08-13 13:27:13Z

5

Use .is(':checked'). You can find the documentation HERE.

JSFIDDLE

answered Aug 13, 2012 at 13:27

user657496

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

1 Comment

Tim Down Over a year ago

It's simpler, faster and more compatible to use the checked property of the checkbox DOM element.

Esailija · Accepted Answer · 2012-08-13 13:27:08Z

4

There is no such method as .checked() in jQuery or in the DOM API. There is simply a .checked property on the element that is true if the element is checked, false otherwise. Try this:

(function ($) {
    "use strict";
    $(document).ready(function () {

        $('#edit-toggle-me').click(function(){
            alert( this.checked ? ":)" : ":(" );
        });
    });

})(jQuery);

See demo: http://jsfiddle.net/scZ3X/

answered Aug 13, 2012 at 13:27

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

Tarun · Accepted Answer · 2012-08-13 13:54:44Z

$(function(){
    $('#edit-toggle-me').on('change', function(){
        if($(this).is(':checked')) {
            alert('checked');
        }
        else {
            alert('unchecked');
        }
    });
});

You should have to use �change� event instead click. Because In some cases click event is not good to use in check box and radio buttons.

Example 1:

If you have a radio button have click event bind. In case your radio button is already true and you clicking in radio button. It�s not change radio button value, But your click event fire every time.

But in case if you use change event. Your event will fire only if your radio button value got change(If it�s already not checked or true)

Example 2: If you have any label for any radio button or check box. In case you have click event bind in checkbox or radio button. On click of your label your check box or radio button value got change but your click event will not call.

In case of change event. It�ll work as expected on click of label related label too.

jahol · Accepted Answer · 2012-08-13 13:31:52Z

0

Try this:

$('#edit-toggle-me').is(':checked')

answered Aug 13, 2012 at 13:31

jahol

663 bronze badges

Collectives™ on Stack Overflow

Get state of checkbox using javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related