如何知道选择哪一行单选按钮id?

时间:2014-03-29 23:55:32

标签: javascript jquery

我制作了一个演示文稿,其中我创建了包含ID tc_1tc_2tc_3 ......等等的行。

当我展开一行时,我有两个选项和一个按钮。我需要知道哪个行ID和哪个选项被选中?

示例:我展开第二行,它应该通过选项添加测试用例提醒tc_1

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

6 个答案:

答案 0 :(得分:1)

以下是alert获取所选元素ID的新jquery代码:

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

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

答案 1 :(得分:0)

在类似的情况下,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');
});

有大量关于遍历和操纵Traversing - Manipulating

的重要资料

答案 2 :(得分:0)

你应该试试这个:

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

答案 3 :(得分:0)

要获取行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/

答案 4 :(得分:0)

你可以试试这个:

$('#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>个元素,你需要指定哪个元素。

Demo

答案 5 :(得分:0)

后:

    $('#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());
         }
    });