CODEWITHSUNDEEP
javascriptjquery
Mark Sandman
Mark Sandman

Reputation: 3333

use JQuery to find the collective radio button group name

I've asked a lot of jQuery questions recently as I'm trying to use it rather good old Javascript, as I mentioned in previous questions, "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "

Now what I'm doing is once the backend is rendering a table to the interface I wish to loop through the tr elements of the table, within one of the td elements of the tr there are two radio buttons. I need to determine the name of the radio button group as I don't define them, the systems does using a GUID or something?

This is the table for example...

<table id="tableID">
    <tr>     
        <td class="qCol">     
        <!-- Label here -->     
        </td>      
        <td class="qCo2">     
        <!-- img here -->     
        <!-- and a text box -->     
        </td>      
        <td class="qCo3">     
        <!-- select menu here -->     
        </td>      
        <td class="qCo4">     
        <!-- radio buttons here -->     
        </td>      
        <td class="qCo5">     
        <!-- select menu here -->     
        </td>     
        <td class="qCo6">     
        <!-- hidden validation image here -->     
        </td> 
    <tr> 
</table>

Okay, I'm looping through the table and at the same time switching the innerHTML of one cell to another and hiding some of the rows, I'll be adding functionality to show these later, here's the jQuery:

$('#tableID tr').each(function (i) {

        /*switch select and validation and clear */
        $(this).children('td.qCol').html($(this).children('td.aCol5').html());
        $(this).children('td.aCol5').html($(this).children('td.vCol'.html(""));

        /* hide all but the first row*/
        if (i >= 1) {
            $(this).hide();
        }

now I'm trying to determine the name attribute of the radio buttons that will be in the cell with class .qCo4, however I'm having no luck as the following returns an error and is "undefined"...

/* get the radio button name and check if either are selected*/

// check something exists...
if ($('input:radio', this).attr('name')) {

    var thisRadioName = $(this).closest("input:radio").attr('name').val();
    alert(thisRadioName);

}

$this is the tr element, so should I be using child rather than closest? If this makes no sense I can expand and explain better.

Upvotes: 3

Views: 1737

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

you should use find() or children(). closest() goes up the tree, while find looks for elements down the tree

var thisRadioName = $(this).find("input:radio").attr('name');

you can use also ':checked' to check if any radio is checked

var checkedRadio = $(this).find("input:radio:checked")

You should use children if you are absolutely sure that the elements you are looking for are direct child of the element, otherwise use find(). (using finds protect you from refactoring code if you modify the html, like adding a wrapping div for other reasons like styiling)

look at this fiddle: http://jsfiddle.net/nicolapeluchetti/Evq6y/

Upvotes: 2

Andrew Cooper
Andrew Cooper

Reputation: 32576

var thisRadioName = $(this).find("input:radio").attr('name');

should do what you want

Upvotes: 0

Related Questions