jQuery's attr() method behavior

Question

^{This is not a ‘ attr() vs prop() ’ question.}

Consider having this so simple web form:

<form action="/">
    <input type="radio" name="type" value="1" checked>
    <input type="radio" name="type" value="2" >
    <input type="radio" name="type" value="3" >
    <input type="radio" name="type" value="4" >
    <button type="submit"> Submit </button>
</form>

The very first radio button has checked attribute as its default, and opening this web form brings up a well known picture:

Within a written jQuery script file, I'm trying to check a radio button - however it could be done using prop() in a right and headache-less way, I went with attr().

Using browser's console, I'm able to check results immediately:

But I know I should uncheck all inputs before checking desired one to expect the correct result:

The argue begins here, when repeating the first step:

My question is why this happens? No check mark in radio button and in regards no value in server side.

@AnkurBhadania This simple example is a real example with so given codes. Yet there is no `.js` file. — revo, Jun 10 '16 at 13:10
I wonder if this is a console specific. ie. is this replicable if run as normal javascript? Either way I am looking forward to an answer. Upvoted — Kyle Pastor, Jun 10 '16 at 13:21
The code, for anyone who wants to test it: https://jsfiddle.net/7obwhush/ — Duncan Lukkenaer, Jun 10 '16 at 13:23
works as expected: https://jsfiddle.net/ybocww3f/2/ ? or what are you trying to achieve? — caramba, Jun 10 '16 at 13:23
and you went trough all those Q/A ? http://stackoverflow.com/questions/2589052/how-to-uncheck-a-radio-button http://stackoverflow.com/questions/10876953/how-to-make-a-radio-button-unchecked-by-clicking-it http://stackoverflow.com/questions/17120576/how-to-uncheck-checked-radio-button http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery http://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button — caramba, Jun 10 '16 at 14:13
or vanilla javascript if jQuery want do the trick: http://stackoverflow.com/questions/2554116/how-to-clear-radio-button-in-javascript — caramba, Jun 10 '16 at 14:17
@caramba Those are not covering same issue but I'm going to post an answer. — revo, Jun 10 '16 at 14:20

score 0 · Accepted Answer · answered Jun 10 '16 at 15:20

The issue is jQuery version specific. It's not a bug at all and wasn't shipped with jQuery v3 alpha release either.

However later, from jQuery v3 beta release, removeAttr() was changed a little.

In jQuery < 3.*, removeAttr() method sets dynamic/current state to false:

// Set corresponding property to false
if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
    elem[ propName ] = false;

And in ther other side attr() only sets the default state (not current state). But in jQuery >= 3.0, we don't see these lines anymore.

In all versions except v3.* (> final and beta releases), we can't expect from these two lines to check a radio button:

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').attr('checked', true);

But these three lines work alongside each other:

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').attr('checked', true);
$('input[value="3"]').prop('checked', true);

Or much more simpler:

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').prop('checked', true);

(But be aware that some javascript codes may check for attributes rather than properties. So you have to do an extra .atrr())

Also in earlier versions it's much better not to use removeAttr() at all but only attr() like so:

$('input[name="type"]:checked').attr('checked', false);
$('input[type="3"]').attr('checked', true);

This behavior change of removeAttr() is discussed on Github as well.

Thanks to those who commented on this issue.

jQuery's attr() method behavior

1 Answers1