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, Jul 14 '13 at 09:42
have you tried `.prop('checked',false/true)` instead of `_this.attr('checked', '');`? — Anton Belev, Jul 14 '13 at 09:43
Also check this related answer http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript?rq=1 — Amitd, Jul 14 '13 at 09: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, Jul 14 '13 at 09:45
@AntonBelev - now I have tried it and it works fine. hmm. But anyways thank you for the suggestion.. right now, issue is solved. thanks guys.. — justin, Jul 14 '13 at 09:48

score 2 · Answer 1 · edited May 23 '17 at 12:05

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 ;)

Anton Belev · Accepted Answer · 2013-07-14T18:01:39.567

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 '13 at 18:01

answered Jul 14 '13 at 09:48

Anton Belev

11,963
22
70
111

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.. – justin Jul 14 '13 at 09:49

jQuery checking and unchecking checkboxes

2 Answers2