CODEWITHSUNDEEP
javascriptjquerycheckbox
numfar
numfar

Reputation: 1675

Get state of checkbox using javascript

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.

Upvotes: 3

Views: 1709

Answers (4)

Tarun
Tarun

Reputation: 1898

$(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.

Upvotes: 1

jahol
jahol

Reputation: 66

Try this:

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

Upvotes: 0

user657496
user657496

Reputation:

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

JSFIDDLE

Upvotes: 5

Esailija
Esailija

Reputation: 140210

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/

Upvotes: 4

Related Questions