How to Check a Radio Button with Jquery

How to check a radio button with jQuery?

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.

How can I know which radio button is selected via jQuery?

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <fieldset>
    <legend>Choose radioName</legend>
    <label><input type="radio" name="radioName" value="1" /> 1</label> <br />
    <label><input type="radio" name="radioName" value="2" /> 2</label> <br />
    <label><input type="radio" name="radioName" value="3" /> 3</label> <br />
  </fieldset>
</form>

How to check radio button is checked using JQuery?

Given a group of radio buttons:

<input type="radio" id="radio1" name="radioGroup" value="1">
<input type="radio" id="radio2" name="radioGroup" value="2">

You can test whether a specific one is checked using jQuery as follows:

if ($("#radio1").prop("checked")) {
   // do something
}

// OR
if ($("#radio1").is(":checked")) {
   // do something
}

// OR if you don't have ids set you can go by group name and value
// (basically you need a selector that lets you specify the particular input)
if ($("input[name='radioGroup'][value='1']").prop("checked"))

You can get the value of the currently checked one in the group as follows:

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

Jquery If radio button is checked

$('input:radio[name="postage"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == 'Yes') {
            // append goes here
        }
    });

Or, the above - again - using a little less superfluous jQuery:

$('input:radio[name="postage"]').change(
    function(){
        if (this.checked && this.value == 'Yes') {
            // note that, as per comments, the 'changed'
            // <input> will *always* be checked, as the change
            // event only fires on checking an <input>, not
            // on un-checking it.
            // append goes here
        }
    });

Revised (improved-some) jQuery:

// defines a div element with the text "You're appendin'!"
// assigns that div to the variable 'appended'
var appended = $('<div />').text("You're appendin'!");

// assigns the 'id' of "appended" to the 'appended' element
appended.id = 'appended';

// 1. selects '<input type="radio" />' elements with the 'name' attribute of 'postage'
// 2. assigns the onChange/onchange event handler
$('input:radio[name="postage"]').change(
    function(){

        // checks that the clicked radio button is the one of value 'Yes'
        // the value of the element is the one that's checked (as noted by @shef in comments)
        if ($(this).val() == 'Yes') {

            // appends the 'appended' element to the 'body' tag
            $(appended).appendTo('body');
        }
        else {

            // if it's the 'No' button removes the 'appended' element.
            $(appended).remove();
        }
    });

var appended = $('<div />').text("You're appendin'!");appended.id = 'appended';$('input:radio[name="postage"]').change(function() {  if ($(this).val() == 'Yes') {    $(appended).appendTo('body');  } else {    $(appended).remove();  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><input type="radio" id="postageyes" name="postage" value="Yes" />Yes<input type="radio" id="postageno" name="postage" value="No" />No

Jquery set radio button checked, using id and class selectors

"...by a class and a div."

I assume when you say "div" you mean "id"? Try this:

$('#test2.test1').prop('checked', true);

No need to muck about with your [attributename=value] style selectors because id has its own format as does class, and they're easily combined although given that id is supposed to be unique it should be enough on its own unless your meaning is "select that element only if it currently has the specified class".

Or more generally to select an input where you want to specify a multiple attribute selector:

$('input:radio[class=test1][id=test2]').prop('checked', true);

That is, list each attribute with its own square brackets.

Note that unless you have a pretty old version of jQuery you should use .prop() rather than .attr() for this purpose.

How to select radio button when li is clicked using jQuery?

You should be able to select the nested radio with

$(this).find('input:radio')

Ref. http://api.jquery.com/radio-selector/

jQuery set radio button

Your selector looks for the descendant of a input:radio[name=cols] element that has the id of newcol (well the value of that variable).

Try this instead (since you're selecting by ID anyway):

$('#' + newcol).prop('checked',true);

Here is a demo: http://jsfiddle.net/jasper/n8CdM/1/

Also, as of jQuery 1.6 the perferred method of altering a property is .prop(): http://api.jquery.com/prop

Find out whether radio button is checked with JQuery?

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

---

Related Topics