jQuery :checked not working with initial (HTML attribute) radio input

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 inputs, 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?

@HectorBarbossa Thank you, I found the source of problem, but still not understand how prop and is work yet. Could you explain it? — Luke Vo
– Luke Vo, Commented Jun 29, 2016 at 21:42
Your question regarding how it works is covered in the documentation. One key aspect to grasp: The HTML attribute only sets the initial value of the property. If it is changed via code or user interaction, the HTML doesn't change, but the property does. — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2016 at 21:50

Hector Barbossa · Accepted Answer · 2016-06-29 21:40:01Z

3

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

answered Jun 29, 2016 at 21:40

Hector Barbossa

5,53813 gold badges51 silver badges70 bronze badges

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

Comments

asemahle · Accepted Answer · 2016-06-29 22:58:54Z

1

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.

edited Jun 29, 2016 at 22:58

answered Jun 29, 2016 at 21:55

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

1 Comment

asemahle Over a year ago

Good catch. Updated.

Chester Millisock Jr · Accepted Answer · 2016-06-29 21:46:19Z

1

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

temp.is(":checked")

instead of

temp.is("checked")

answered Jun 29, 2016 at 21:46

Chester Millisock Jr

2701 silver badge9 bronze badges

1 Comment

Heretic Monkey Over a year ago

How is this different from the existing answer?

Collectives™ on Stack Overflow

jQuery :checked not working with initial (HTML attribute) radio input

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related