jQuery checking and unchecking checkboxes

Question

I have to check and uncheck the checkboxes. But it is not working well.

Example: When the status is active on the 1st load:

Unchecking the checkboxes into inactive (Works fine)
Checking it back again to make it active (Not working, stays uncheck)

Example: WHen the status is inactive on the 1st load:

Checking the checkboxes into active (Works fine)
Unchecking the checkboxes into inactive (Works fine)
Checking it back again to make it active (Not working, stays uncheck)

Here is my sample code:

var statusCheck = $('.status-box');

$.ajax({
    url: 'sample/url',
    type: 'POST',
    data: {
        user_id: ids,
        status: statusVal
    },
    success: function (response) {
        if (response == 'ok') {
            $.each(statusCheck, function () {
                var _this = $(this);

                if (_this.is(':checked')) {
                    _this.removeAttr('checked');
                } else {
                    _this.attr('checked', '');
                }
            });
        }
    }
});

Do you get any error in error console? Try hitting F12 to bring the console up — Amitd
– Amitd, Commented Jul 14, 2013 at 9:42
have you tried .prop('checked',false/true) instead of _this.attr('checked', '');? — Anton Belev
– Anton Belev, Commented Jul 14, 2013 at 9:43
Also check this related answer stackoverflow.com/questions/426258/… — Amitd
– Amitd, Commented Jul 14, 2013 at 9:43
@Amitd - I have, but there is no error. actually, it will place the checked="checked" on the HTML element, but the checkbox still remain unchecked. — justin
– justin, Commented Jul 14, 2013 at 9:45

Anton Belev · Accepted Answer · 2013-07-14 18:01:39Z

2

I had problems (strange anomalies) with checking and unchecking checkboxes with JQuery. I was using .attr and .removeAttr and when I changed it to .prop('checked',false/true) I resolved the problem.

Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. Reference:

Note you should be using JQuery 1.6 +.

edited Jul 14, 2013 at 18:01

answered Jul 14, 2013 at 9:48

Anton Belev

14k23 gold badges76 silver badges115 bronze badges

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

1 Comment

justin Over a year ago

I have tried this .prop() yesterday, and it is not working. But I have tried it now, and it works well. Maybe it has something to do with my codes.. but right now it is solved.. using .prop(), thank you..

Community · Accepted Answer · 2017-05-23 12:05:28Z

2

var statusCheck = $('.status-box')

$.ajax({
        url     : 'sample/url',
        type    : 'POST',
        data    : { user_id: ids, status: statusVal },
        success : function( response ) {
            if( response == 'ok' ) {
                $.each(statusCheck, function(){
                    var _this    = $(this);

                    if( _this.is(':checked') ) {
                        _this.removeAttr('checked');
                    } else {
                        _this.attr('checked', 'checked');
                             // ...............^ here ^
                    }
                });
            }
        }
    });

Try this: _this.attr('checked', 'checked');

Also .prop() from this Link might do the magic ;)

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jul 14, 2013 at 9:47

Kamran Ahmed

12.5k24 gold badges73 silver badges103 bronze badges

Collectives™ on Stack Overflow

jQuery checking and unchecking checkboxes

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related