How to get or set Selected index of the Radio Button List using jquery?

Question

How I can radio button checked using index.. Below is my asp.net C# code for radion button list...

<asp:RadioButtonList runat="server" ID="rdlCategory" CssClass="clsradio" AppendDataBoundItems="true" RepeatDirection="Horizontal" RepeatLayout="Flow" >
</asp:RadioButtonList>

and Bind it using C# dynamically.. and Html looks like

<span class="clsradio" id="ctl00_cphTop_rdlCategory"><input type="radio" value="8" name="ctl00$cphTop$rdlCategory" id="ctl00_cphTop_rdlCategory_0"> 
    <label for="ctl00_cphTop_rdlCategory_0">category1</label>
    <input type="radio" value="11" name="ctl00$cphTop$rdlCategory" id="ctl00_cphTop_rdlCategory_1">
    <label for="ctl00_cphTop_rdlCategory_1">category2</label>
    <input type="radio" value="22" name="ctl00$cphTop$rdlCategory" id="ctl00_cphTop_rdlCategory_2">
    <label for="ctl00_cphTop_rdlCategory_2">category3</label>
    <input type="radio" value="33" name="ctl00$cphTop$rdlCategory" id="ctl00_cphTop_rdlCategory_3">
    <label for="ctl00_cphTop_rdlCategory_3">category4</label>
    <input type="radio" value="34" name="ctl00$cphTop$rdlCategory" id="ctl00_cphTop_rdlCategory_4">
    <label for="ctl00_cphTop_rdlCategory_4">category5</label>
    </span>

I want to add attribute checked=true to radio button by index value .
suppose, I passed index=2 then it should be selected Category2 ..
or also want to get selected (checked=true) radio button index using in jquery..

How I do this?

Answer 1

Unlike select boxes, there isn't really a concept of an index in radio buttons.

However you can do something like this in jQuery:

$(".clsradio input:checked").index();

Which will get all the input boxes within your span that are checked (which as your using radio's should only be one, if only one group is inside .clsradio).

Here is an example on jsfiddle

---

EDIT:

A more full proof example (but slower) would be:

$("input[name$='rdlCategory']:checked").index();

Which gets inputs ending in rdlCategory. You could even add ":radio" but you don't need to.

---

EDIT 2 - Checking by passing in index.

You can use:

 $(".clsradio input:nth-child(5)").attr("checked", "checked");

nth-child using the "input" selector can be used as the index.

Answer 2

This is working for me:

$($("input[name='GroupName']").get(index)).prop('checked', true);

Explanation:

$("input[name='GroupName']") returns a list of items that have the name 'GroupName'

.get(index) returns the i th item in the list. In the case of a radio group this would be the input tag you want.

The input tag is an HTML element, not a jQuery item, so you re-wrap it. Then you can call the prop method.

$(html).prop('checked',true)

Answer 3

use index method of jquery

function selectRadioButton(inputindex){
    $('input[name="ctl00$cphTop$rdlCategory"]').index(inputindex).attr('checked', true);
}

to get selected radio button index...

var selectedIndex =  $('input[name="ctl00$cphTop$rdlCategory"]').attr('checked', true).index(inputindex);

Answer 4

    $("#<%= rdlCategory.ClientID %> input:checked").index();

As for how select items in ASP.NET using jQuery, i'm not sure it will work in all scenarios. ASP.NET updates ViewState each time you touch ASP.NET control thus i wouldn't use much jQuery to manipulate values of selection

if you still want this then $(selector).attr("checked",true);

Answer 5

未选中将给出“未定义”，否则将返回所选对象的值。

$('input[name=ctl00$cphTop$rdlCategory]:checked').val()