如何使用jquery获取或设置单选按钮列表的选定索引

本文关键字:列表 索引 单选按钮 设置 何使用 jquery 获取 | 更新日期: 2023-09-27 18:00:24

如何使用索引检查单选按钮。。下面是我的asp.net C#代码的无线电按钮列表。。。

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

并使用C#动态绑定。。Html看起来像

<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>

我想通过索引值将属性checked=true添加到单选按钮
假设,我通过了index=2,那么它应该被选择为类别2
或者还想使用jquery中的来获得选中(checked=true)单选按钮索引

我是怎么做到的?

如何使用jquery获取或设置单选按钮列表的选定索引

与选择框不同,单选按钮中实际上没有索引的概念。

然而,您可以在jQuery:中执行类似操作

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

这将获得您范围内所有被选中的输入框(如果.clsradio内只有一个组,则作为您使用的收音机,应该只有一个)。

下面是jsfiddle 的一个例子


编辑:

一个更充分的例子(但更慢)是:

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

它得到以rdlCategory结尾的输入。你甚至可以添加":radio",但你不需要。


编辑2-通过传入索引进行检查。

您可以使用:

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

使用"input"选择器的第n个子项可以用作索引。

使用jquery 的索引方法

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

要获取选定的单选按钮索引。。。

var selectedIndex =  $('input[name="ctl00$cphTop$rdlCategory"]').attr('checked', true).index(inputindex);
    $("#<%= rdlCategory.ClientID %> input:checked").index();

至于如何在ASP中选择项目。NET使用jQuery,我不确定它是否适用于所有场景。ASP。NET每次触摸ASP时都会更新ViewState。NET控件,因此我不会使用太多jQuery来操作选择的值

如果您仍然需要,则$(selector).attr("checked",true);

这对我有效:

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

说明:

$("input[name='GroupName']")返回名为"GroupName"的项目列表

CCD_ 3返回列表中的第CCD_。在无线电组的情况下,这将是您想要的输入标签。

input标记是一个HTML元素,而不是jQuery项,所以您可以重新包装它。然后您可以调用prop方法。

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

未选中将给出"undefined",否则将返回所选对象的值。

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