CODEWITHSUNDEEP
javascriptjquery
user944513
user944513

Reputation:

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

I have make a demo in which I make rows with ids tc_1, tc_2, tc_3 …… and so on.

When I expand a row, I have two options and a button. I need to get know which row id and which option is selected?

Example: I expand second row, It should alert tc_1 with option select Add test case.

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

Upvotes: 1

Views: 485

Answers (6)

MagyaDEV
MagyaDEV

Reputation: 375

After:

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

Add handler for radio change event:

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

Upvotes: 0

Shomz
Shomz

Reputation: 37701

To get the row id and the value of checked radio, use this: 

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

It gives you output like this, for example: 

tc_1
TestCommand

which I believe is exactly what you're looking for.

I used this to fetch the row id: 

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

and this to get the checked radio value: 

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

Both related to the clicked Add button.

See it in action here: http://jsfiddle.net/R2DzV/16/

Upvotes: 0

Mike Stapp
Mike Stapp

Reputation: 626

Here's some new jquery code for your alert that gets the id of the selected element:

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

Here's a forked jsfiddle showing this working change: http://jsfiddle.net/mstapp/mGSJ7/1/

Upvotes: 1

Rahil Wazir
Rahil Wazir

Reputation: 10132

Well you can try this:

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

But you need to be careful, if there will be more <li> elements you need to specify which one to target.

Demo

Upvotes: 0

Biduleohm
Biduleohm

Reputation: 752

You should try this:

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

Upvotes: 0

arma
arma

Reputation: 4124

In cases like those jQuery will provide you with element object in question $(this):

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

If you want to get to some specific item from button you have whole documentation to choose from. But for example sake lets say you want to find li that wraps all case:

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

There's tons of great material on traversing and manipulating Traversing - Manipulating

Upvotes: 0

Related Questions