jQuery：选中不与初始（HTML属性）单选输入一起使用

Question

Please inspect the following Console output, note that the 1st input has checked attribute and is selected:

You can see I have 2 radio input s, 1 is checked , however neither selector nor prop nor is works for it. The code works correctly if I manually click on one of the radio. Here is my HTML:

<div class="col-sm-6">
    Type:
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
            <input type="radio" name="generator-type" id="opt-type-passphrase" value="0" autocomplete="off" checked>
            Passphrase
        </label>
        <label class="btn btn-default">
            <input type="radio" name="generator-type" id="opt-type-password" value="1" autocomplete="off">
            Password
        </label>
    </div>
</div>

Why is the code not working when the page loads when I haven't clicked any radio? Is there a way to fix it?

EDIT : Found the problem, I have this code in the page load:

        $("input[name='generator-type'][value=" + this.Options.Type + "]").prop("checked", "");

The correct solution is using:

.prop("checked", true)

But can anyone please explain how it work? Why is there the checked attribute, but prop function is still false?

Answer 1

Try .is(':checked') instead of .is('checked') . Please check this Fiddle .

Answer 2

You're missing a colon in the is-checked code:

temp.is(":checked")

instead of

temp.is("checked")

Answer 3

You need to check like this

$( ... ).is(':checked')

Why? Because the jquery is method accepts a css selector which it uses to filter the currently matched elements.

Thus temp.is('checked') will only be true if the temp elements have the checked tag. In your case they have the input tag so do not match.

Using :checked matches on the css pseudo selector for whether the current element is checked or not. This is what you want.

Knowing this, you could also use $( ... ).is('[checked]') , which will return true if the matched elements have the checked attribute. That's probably what you were trying to do originally. Though, the conventional way is to use :checked .