Bootstrap doesn't use "checked" attribute of checkbox

Question

I am using Bootstrap. I have a table with a checkbox in a header and in each collumn. I am trying to make "check all" functionality on jQuery, but it seems that bootstrap does not use checked attribute. As I see, it adds span tag around my checkbox and adds a class 'checked' to it. Is there any possibility to work with checked attr, or I must forget about it and write class checking and switching?

Below goes the part of code from the result HTML:

<td>
  <div class="checker">
    <span class="">
      <input type="checkbox" class="payout_check" style="opacity: 0;">
    </span>
  </div>
</td>

This is unchecked one. The it is checked, third row changes to:

<span class="checked">

Lol, this all depends on your layout. ITs easy to do what you ask, but to give you example in your work I need to see some code. Setup a [jsfiddle](http://jsfiddle.net/) of your example and i'd be happy to write it on thru using your code setup — SpYk3HH, Jun 03 '13 at 21:24
possible duplicate of [Toggle checkbox on Twitter Bootstrap](http://stackoverflow.com/questions/11958523/toggle-checkbox-on-twitter-bootstrap) — Adrian J. Moreno, Jun 03 '13 at 21:24
It does not depends on my layout, I think. I toggle checked attr, it is just work in a different way, using span and its class. — Bandydan, Jun 03 '13 at 21:28
Not sure what you're trying to do here. Bootstrap doesn't include anything special for checkboxes (other than a layout class or two). Are you using a plugin? — Tieson T., Jun 03 '13 at 22:09
I have some checkboxes and one "to rule them all") By clicking on it I want to select them all, and it adds an attribute checked='checked', but checkboxes have opacity=0%, due to something in bootstrap. Bootstrap replaces them with something "more nice". The result checkboxes can be checked only by changing class of parent span. Looks like my question is "What is wrong with my bootstrap?" — Bandydan, Jun 03 '13 at 22:14

score 12 · Answer 1 · edited Jan 07 '16 at 20:32

12

You could use prop. I faced the same issue. On checking a checkbox, the attribute checked came as undefined. When i changed it to prop, it gave true and false value based on the state of the check box.

$('#checkboxId').prop('checked');

edited Jan 07 '16 at 20:32

BenV

12,052
13
64
92

answered Feb 19 '15 at 10:51

Fight code with code

194
1
8

This solved my problem. I used to call attr('checked') instead of this, and I had troubles. Now it works. – SudoPlz Feb 13 '16 at 00:19

score 5 · Answer 2 · answered Jun 03 '13 at 21:23

5

If I am understanding your issue I think the answer to an older question should help.

$('#toggle-all').click(function() {
    $('.btn-group input[type="checkbox"]').prop('checked', true);
});

http://jsfiddle.net/mmfansler/g3mu8/

answered Jun 03 '13 at 21:23

craighandley

156
1
8

I have read that before, thanks. My code works as it shoud. I set all other checkboxes attribute, but checkbox still looks unchecked. In console.dir() results I can see, that it hase checked="checked", as it should be... – Bandydan Jun 03 '13 at 21:27

score 5 · Accepted Answer · answered Jul 10 '13 at 06:36

5

this work for uncheck

jQuery('span', $('#uniform-You_id_checkbox')).removeClass("checked");

$('#You_id_checkbox').removeAttr("checked");

answered Jul 10 '13 at 06:36

agraterol

66
1

Jhonatascf · Answer 4 · 2020-07-16T14:36:58.793

3

This worked for me:

$('#form-new-event input[type=checkbox]').parents('span').removeClass("checked");

OR

$('#form-new-event input[type=checkbox]').removeAttr("checked");

edited Jul 16 '20 at 14:36

answered Aug 07 '14 at 14:59

Jhonatascf

451
4
7

score 1 · Answer 5 · answered Nov 27 '13 at 15:35


    $(document).ready( function(){
        $("[type=checkbox]").on("click", function(){
            if ($(this).attr("checked")==undefined) { 
                    $(this).attr("checked","checked");
                } else {
                   $(this).attr("checked",false);
                }
        });
    });

score 1 · Answer 6 · answered Aug 07 '14 at 19:04

Using jQuery

$("input[name='theCheckboxName']").is(":checked"); // Returns true or false

OR

$("input[name='theCheckboxName']").prop("checked"); // Returns true or false

This inspects the "checked" property of the DOM element rather than the existence of the "checked" attribute on the tag. Using this method you avoid having to set and unset the "checked" attribute.

In Markup

<div class="checkbox">
    <label>
        <input name="theCheckboxName" type="checkbox" checked="checked"> <span>Yes</span>
    </label>
</div>

This makes the checkbox checked by default. The "checked" property should still be used to determine state programmatically.

Check out this link for more info:

http://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php

score 0 · Answer 7 · answered Aug 25 '14 at 18:26

$('#your-checkbox-id').parents('span').removeClass("checked").end().removeAttr("checked").change();

or

$('#your-checkbox-id').prop('checked') && $('#your-checkbox-id').click();

PS: the last one will emulate a click (only if the checkbox is checked). If you don't want to trigger an event, use the first one and remove the "change()" call.

Bootstrap doesn't use "checked" attribute of checkbox

7 Answers7

Linked