如何知道哪一行选择了哪个单选按钮 ID

how to know which radio button id selected of which row?

本文关键字：选择 单选按钮 ID 一行 何知道      更新时间：2023-09-26

我做了一个演示，其中我用 id tc_1、tc_2、tc_3 ......等等。

当我展开一行时，我有两个选项和一个按钮。我需要知道选择了哪个行 ID 和哪个选项？

示例：我展开第二行，它应该通过选项选择"添加测试用例"来提醒tc_1。

$('#list').on('click','.addClickClass',function(){
    alert('hii')
});
下面是

一些新的 jquery 代码，用于获取所选元素的 id alert：

 alert('hi from ' + $(e.target).closest('[datarole="collapsible"]').find('input:checked').attr('id') )

这是一个分叉的jsfiddle，显示了这种工作变化： http://jsfiddle.net/mstapp/mGSJ7/1/

若要获取行 ID 和已检查无线电的值，请使用以下命令： 

$('#list').on('click','.addClickClass',function(){
     alert($(this).parents('li[id*="tc"]').attr('id') + "'n" 
         + $(this).parents('.ui-collapsible').find('input:checked').val())
 })

它为您提供如下输出，例如： 

tc_1
TestCommand

我相信这正是您正在寻找的。

我用它来获取行 id： 

$(this).parents('li[id*="tc"]').attr('id')

这是为了获得检查的无线电值： 

$(this).parents('.ui-collapsible').find('input:checked').val()

两者都与单击的"添加"按钮有关。

在这里看到它的实际应用：http://jsfiddle.net/R2DzV/16/

在这样的情况下，jQuery将为您提供有问题的元素对象$(this)：

$('#list').on('click','.addClickClass',function(){
    // This is current button clicked
    console.log($(this));
});

如果您想从按钮获取某些特定项目，则可以从整个文档中进行选择。 但例如，清酒假设您想找到包装所有情况的li：

$('#list').on('click','.addClickClass',function(){
    //  Get the first ancestor that matches a selector
    $(this).closest('li');
});

有大量关于遍历和操作的精彩材料 遍历 - 操纵

你应该试试这个：

$('#list').on('click','.addClickClass',function(){
    alert($(this).closest('div').parent().parent().prop('id'));
});

好吧，你可以试试这个：

$('#list').on('click', '.addClickClass', function () {
    var row = $(this).parents('li').eq(1); // top second parent
    var selected = row.find('label[data-icon="radio-on"] .ui-btn-text').text();
    alert(row.attr('id') + "'n" + selected);
});

但是您需要小心，如果有更多<li>元素，则需要指定要定位的元素。

演示

之后：

    $('#list').trigger('create');

为无线电更改事件添加处理程序：

    var $appendedLi = $("#list>li:last-child");
    $appendedLi.find ("input[type='radio']").on ("change", function () {
         if ($(this).prop("checked")) {
             alert("Current row: " + $(this).closest("#list>li").attr("id"));
             alert("Selected option: " + $(this).val());
         }
    });
相关文章：