[jquery] .attr('checked','checked') does not work

I am trying to check radio. Neither the following works:

[edit]

$('selector').attr('checked','checked');
$('selector').attr('checked',true);

The two alert() in the following code show "1" and "a", respectively. My expectation is the second alert() showing "b".

Opera does check the second radio box in its browser, but its element inspector, dragonfly, shows that the DOM is not changed.

[end edit]

I had read the FAQ before I posted this question:

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_check.2Funcheck_a_checkbox_input_or_radio_button.3F

Helps will be much appreciated!

TIA

The xhtml page and code follows:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Weird Behavior</title>
<script type="text/javascript" src="scripts/jquery.js"/>
<script type="text/javascript">
function clickme(){
    alert($('input[name="myname"][value="b"]').length);
    $('input[name="myname"][value="b"]').attr('checked','checked');
    $('#b').attr('checked',true);
    alert($('input[name="myname"][checked]').val());
};
</script>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Why check is not switched?</legend>
            <input type="radio" name="myname" value="a" id="a" checked="checked"/>A
            <input type="radio" name="myname" value="b" id="b"/>B
        </fieldset>
    </form>
    <p>
    <button type="button" onclick="clickme()">click me</button>
    </p>
</body>
</html>

This question is related to jquery

The answer is


Why not try IS?

$('selector').is(':checked') /* result true or false */

Look a FAQ: jQuery .is() enjoin us ;-)


$('.checkbox').prop('checked',true); 
$('.checkbox').prop('checked',false);

... works perfectly with jquery1.9.1


I don't think you can call

$.attr('checked',true);

because there is no element selector in the first place. $ must be followed by $('selector_name'). GOod luck!


$("input:radio").attr("checked",true); //for all radio inputs

or

$("your id or class here").attr("checked",true); //for unique radios

equally the same works for ("checked","checked")


It works, but

$('input[name="myname"][checked]').val()

will return the value of the first element with attribute checked. And the a radio button still has this attribute (and it comes before the b button). Selecting b does not remove the checked attribute from a.

You can use jQuery's :checked:

$('input[name="myname"]:checked').val()

DEMO


Further notes:

  • Using $('b').attr('checked',true); is enough.
  • As others mentioned, don't use inline event handlers, use jQuery to add the event handler.

 $('.checkbox').attr('checked',true);

will not work with from jQuery 1.6.

Instead use

$('.checkbox').prop('checked',true);
$('.checkbox').prop('checked',false);

Full explanation / examples and demo can be found in the jQuery API Documentation https://api.jquery.com/attr/