Checkbox default icon doesn’t update with jQuery

Question

I have a simple script that on <a> click it checks or unchecks a checkbox. All works fine the first time, but once the value is altered with jQuery it’s not being updated (though in Chrome’s inspector the attribute checked="checked" is being added/removed).

HTML:

<a href="#" class="js-tick-untick-checkbox">
    <input type="checkbox" class="send-invite-checkbox" />
    Something something in the month of May
</a>

jQuery:

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox');

  if ($(checkbox).attr('checked') === 'checked') {
    checkbox.removeAttr('checked');
    $(this).removeClass('selected-element');
  } else {
    checkbox.attr('checked', 'checked');
    $(this).addClass('selected-element');
  }
  return false;
})

Check out the demo: http://jsfiddle.net/y3e0jfc6/

I tried various other options, like checked="true" / checked="false", none work…

Any ideas? Thanks.

T J · Accepted Answer · 2014-08-13 11:41:42Z

2

Use prop() instead of attr()

From docs:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

$('.js-tick-untick-checkbox').click(function () {
    var checkbox = $(this).find('.send-invite-checkbox');
    if ($(checkbox).prop('checked')) {
        checkbox.prop('checked', false);
        $(this).removeClass('selected-element');
    } else {
        checkbox.prop('checked', true);
        $(this).addClass('selected-element');
    }
    return false;
})

Demo

Sidenote: you can do it like this as well.

edited Aug 13, 2014 at 11:41

answered Aug 13, 2014 at 10:35

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

3 Comments

Alex Over a year ago

Thanks, should’ve used prop().

Amit Over a year ago

@ TJ, I will suggest use checkbox.prop('checked', true); instead of checkbox.prop('checked', true);

T J Over a year ago

@AmitAgrawal did you mean the quotes around true..? i prefer boolean also… updated...

Rob Forrest · Accepted Answer · 2014-08-13 10:36:54Z

1

You should be using $.prop() instead.

checkbox.prop('checked', true);
checkbox.prop('checked', false);

answered Aug 13, 2014 at 10:36

Rob Forrest

7,4809 gold badges55 silver badges69 bronze badges

Comments

webNeat · Accepted Answer · 2014-08-13 10:42:50Z

1

Try this code

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox');

    if ($(checkbox).is(':checked')) {
    checkbox.prop('checked', false);
    $(this).removeClass('selected-element');
  } else {
    checkbox.prop('checked', true);
    $(this).addClass('selected-element');
  }
  return false;
});

answered Aug 13, 2014 at 10:42

webNeat

2,8661 gold badge22 silver badges25 bronze badges

Comments

Ankit Saroch · Accepted Answer · 2014-08-13 10:44:17Z

1

You should use .prop instead of .attr

updated jquery

$('.js-tick-untick-checkbox').click(function() {
var checkbox = $(this).find('.send-invite-checkbox');

if ($(checkbox).prop('checked') == true) {
checkbox.prop('checked', false);
$(this).removeClass('selected-element');
} else {
checkbox.prop('checked', true);
$(this).addClass('selected-element');
}
return false;
})

Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. Source

answered Aug 13, 2014 at 10:44

Ankit Saroch

6907 silver badges14 bronze badges

1 Comment

Amit Over a year ago

this is also suggested by TN. Any difference

RGS · Accepted Answer · 2014-08-13 10:38:14Z

0

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox'); 
    if ($(checkbox).is(':checked')) {
    $(checkbox).removeAttr('checked');
  } else {
    $(checkbox).prop('checked', 'checked');       
  }
   $(this).toggleClass('selected-element');
  return false;
})

Demo:

http://jsfiddle.net/4ywmLr3u/1/

answered Aug 13, 2014 at 10:38

RGS

5,2217 gold badges44 silver badges69 bronze badges

Collectives™ on Stack Overflow

Checkbox default icon doesn’t update with jQuery

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related