Select Exact Number Of Table Td After A Radiobutton Is Checked

I have a multistep form, where in one step I select the whole number (1–X) with which I can work in the next step. In the next step I have a table of days of a week (I only show

Solution 1:

Did you want to highlight a column depending on which radio button is selected? http://jsfiddle.net/rkw79/fYqME/

You can make use of .index() to determine which column is selected, and then use :nth-child() to select the actual td in the column.

$('input:radio').change(function() {
    var i = $(this).parent().index() + (1);
    $('td').removeClass('highlight');
    $('td:nth-child(' + i + ')').addClass('highlight');
});

Updated. Looks more complicated than it needs to be. If you can clarify your functional needs, we can simplify the code. But if that cannot be done, here's the updated code. var num = 2 is the amount of cells to highlight. http://jsfiddle.net/rkw79/fYqME/1/

$('input:radio').change(function() {
    var num = 2;
    var col = $(this).closest('td').index() + 1;
    var row = $(this).closest('tr').index();

    var tds = $('td:nth-child(' + col + ')');
    tds = tds.slice(row,row+num);

    $('td').removeClass('highlight');
    tds.addClass('highlight');
});

Solution 2:

just add a unique id(number) for both the radio button and the in which the radio button is present. For e.g.

<tdid=1><divclass="form-item"id="edit-datetime-worker-wrapper"><labelclass="option"for="edit-datetime-worker"><inputtype="radio"id="edit-datetime-worker-1"name="datetime_worker"value="2011-12-06T08:00:00::3"class="form-radio" /><span>6. 12. 2011 – 08:00</span></label></div></td>

Note that unique id for the is 1 and the same for radio button id="edit-datetime-worker-1". Now you can get the unique number of the radio button using the getattribute() function and match that number with the and you can now add class to the when you click on the corresponding radio button.