jquery - Get state of checkbox using javascript - Stack Overflow

admin管理员组

文章数量:1332873

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.

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.

• javascript
• jquery
• checkbox

Share Improve this question Follow asked Aug 13, 2012 at 13:24 numfarnumfar 1,67544 gold badges1818 silver badges3939 bronze badges 1

• Amazing you were even allowed to ask this megaFAQ – mplungjan Commented Aug 13, 2012 at 13:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

JSFIDDLE

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/scZ3X/

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

Try this:

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

本文标签： jqueryGet state of checkbox using javascriptStack Overflow