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.

Answer 1

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/