Bootstrap doesn't use “checked” attribute of checkbox

问题

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">

回答1:

this work for uncheck

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

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

回答2:

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

回答3:

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/

回答4:

This worked for me:

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

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

回答5:


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

回答6:

Using jQuery

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

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

回答7:

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

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

来源：https://stackoverflow.com/questions/16906018/bootstrap-doesnt-use-checked-attribute-of-checkbox

标签

jquery

twitter-bootstrap

checkbox