How to check a radio button with jQuery?

问题:

I try to check a radio button with jQuery. Here\'s my code:

<form>
    <div id=\'type\'>
        <input type=\'radio\' id=\'radio_1\' name=\'type\' value=\'1\' />
        <input type=\'radio\' id=\'radio_2\' name=\'type\' value=\'2\' />
        <input type=\'radio\' id=\'radio_3\' name=\'type\' value=\'3\' /> 
    </div>
</form>

And the JavaScript:

jQuery(\"#radio_1\").attr(\'checked\', true);

Doesn\'t work:

jQuery(\"input[value=\'1\']\").attr(\'checked\', true);

Doesn\'t work:

jQuery(\'input:radio[name=\"type\"]\').filter(\'[value=\"1\"]\').attr(\'checked\', true);

Doesn\'t work:

Do you have another idea? What am I missing?

回答1:

For versions of jQuery equal or above (>=) 1.6, use:

$(\"#radio_1\").prop(\"checked\", true);

For versions prior to (<) 1.6, use:

$(\"#radio_1\").attr(\'checked\', \'checked\');

Tip: You may also want to call click() or change() on the radio button afterwards. See comments for more info.

回答2:

Try this.

In this example, I\'m targeting it with its input name and value

$(\"input[name=background][value=\'some value\']\").prop(\"checked\",true);

Good to know: in case of multi-word value, it will work because of apostrophes, too.

回答3:

One more function prop() that is added in jQuery 1.6, that serves the same purpose.

$(\"#radio_1\").prop(\"checked\", true); 

回答4:

Short and easy to read option:

$(\"#radio_1\").is(\":checked\")

It returns true or false, so you can use it in \"if\" statement.

回答5:

Try this.

To check Radio button using Value use this.

$(\'input[name=type][value=2]\').attr(\'checked\', true); 

Or

$(\'input[name=type][value=2]\').attr(\'checked\', \'checked\');

Or

$(\'input[name=type][value=2]\').prop(\'checked\', \'checked\');

To check Radio button using ID use this.

$(\'#radio_1\').attr(\'checked\',\'checked\');

Or

$(\'#radio_1\').prop(\'checked\',\'checked\');

回答6:

The $.prop way is better:

$(document).ready(function () {                            
    $(\"#radio_1\").prop(\'checked\', true);        
});

and you can test it like the following:

$(document).ready(function () {                            
    $(\"#radio_1, #radio_2\", \"#radio_3\").change(function () {
        if ($(\"#radio_1\").is(\":checked\")) {
            $(\'#div1\').show();
        }
        else if ($(\"#radio_2\").is(\":checked\")) {
            $(\'#div2\').show();
        }
        else 
            $(\'#div3\').show();
    });        
});

回答7:

Try This:

$(\"input[name=type]\").val([\'1\']);

http://jsfiddle.net/nwo706xw/

回答8:

You have to do

jQuery(\"#radio_1\").attr(\'checked\', \'checked\');

That\'s the HTML attribute

回答9:

If property name does not work don\'t forget that id still exists. This answer is for people who wants to target the id here how you do.

$(\'input[id=element_id][value=element_value]\').prop(\"checked\",true);

Because property name does not work for me. Make sure you don\'t surround id and name with double/single quotations.

Cheers!

回答10:

Yes, it worked for me like a way:

$(\"#radio_1\").attr(\'checked\', \'checked\');

回答11:

$(\"input[name=inputname]:radio\").click(function() {
    if($(this).attr(\"value\")==\"yes\") {
        $(\".inputclassname\").show();
    }
    if($(this).attr(\"value\")==\"no\") {
        $(\".inputclassname\").hide();
    }
});

回答12:

We should want to tell it is a radio button.So please try with following code.

$(\"input[type=\'radio\'][name=\'userRadionButtonName\']\").prop(\'checked\', true);

回答13:

Just in case anyone is trying to achieve this while using jQuery UI, you will also need to refresh the UI checkbox object to reflect the updated value:

$(\"#option2\").prop(\"checked\", true); // Check id option2
$(\"input[name=\'radio_options\']\").button(\"refresh\"); // Refresh button set

回答14:

Try this

var isChecked = $(\"#radio_1\")[0].checked;

回答15:

Get value:

$(\"[name=\'type\'][checked]\").attr(\"value\");

Set value:

$(this).attr({\"checked\":true}).prop({\"checked\":true});

Radio Button click add attr checked:

$(\"[name=\'type\']\").click(function(){
  $(\"[name=\'type\']\").removeAttr(\"checked\");
  $(this).attr({\"checked\":true}).prop({\"checked\":true});
});

回答16:

Try this with example

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<form id=\"myForm\">
<input type=\"radio\" name=\"radio\" value=\"first\"/> 1 <br/>
<input type=\"radio\" name=\"radio\" value=\"second\"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $(\'#myForm\').on(\'click\', function () {
        var value = $(\"[name=radio]:checked\").val();

        alert(value);
    })
});
</script>

回答17:

I got some related example to be enhanced, how about if I want to add a new condition, lets say, if I want colour scheme to be hidden after I click on project Status value except Pavers and Paving Slabs.

Example is in here:

$(function () {
    $(\'#CostAnalysis input[type=radio]\').click(function () {
        var value = $(this).val();

        if (value == \"Supply & Lay\") {
            $(\'#ul-suplay\').empty();
            $(\'#ul-suplay\').append(\'<fieldset data-role=\"controlgroup\"> \\

http://jsfiddle.net/m7hg2p94/4/

回答18:

I use this code:

I\'m sorry for English.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j(\'#radio-1, #radio-2\').click(function(){

        // find all checked and cancel checked
        $j(\'input:radio:checked\').prop(\'checked\', false);

        // this radio add cheked
        $j(this).prop(\'checked\', true);
    });
});

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<fieldset class=\"section\">
  <legend>Radio buttons</legend>
  <label>
    <input type=\"radio\" id=\"radio-1\" checked>
    Option one is this and that&mdash;be sure to include why it\'s great
  </label>
  <br>
  <label>
    <input type=\"radio\" id=\"radio-2\">
    Option two can be something else
  </label>
</fieldset>

回答19:

Try this

$(document).ready(function(){
    $(\"input[name=\'type\']:radio\").change(function(){
        if($(this).val() == \'1\')
        {
          // do something
        }
        else if($(this).val() == \'2\')
        {
          // do something
        }
        else if($(this).val() == \'3\')
        {
          // do something
        }
    });
});

回答20:

try this

 $(\"input:checked\", \"#radioButton\").val()

if checked returns True if not checked returns False

jQuery v1.10.1

回答21:

Some times above solutions do not work, then you can try below:

jQuery.uniform.update(jQuery(\"#yourElementID\").attr(\'checked\',true));
jQuery.uniform.update(jQuery(\"#yourElementID\").attr(\'checked\',false));

Another way you can try is:

jQuery(\"input:radio[name=yourElementName]:nth(0)\").attr(\'checked\',true);

回答22:

I\'ve just have a similar problem, a simple solution is to just use:

.click()

Any other solution will work if you refresh radio after calling function.

回答23:

function rbcitiSelction(e) {
     debugger
    $(\'#trpersonalemail\').hide();
    $(\'#trcitiemail\').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $(\'#trpersonalemail\').show();
    $(\'#trcitiemail\').hide();
}

$(function() {  
    $(\"#citiEmail\").prop(\"checked\", true)
});

回答24:

$(\"#radio_1\").attr(\'checked\', true);
//or
$(\"#radio_1\").attr(\'checked\', \'checked\');

回答25:

Try This:

$(document).ready(function(){
  $(\"#Id\").prop(\"checked\", true).checkboxradio(\'refresh\');
});

回答26:

attr accepts two strings.

The correct way is:

jQuery(\"#radio_1\").attr(\'checked\', \'true\');

回答27:

attr accepts two strings.

The correct way is:

jQuery(\"#radio_1\").attr(\'checked\', \'true\');