I'm using jQuery 1.4. I'm trying to highlight the <td> tag of a Table everytime that a radio button inside that "<td>" is selected and remove the highlight class if it's not selected.

Here's the mark-up:

CSS: .highlight-blue { background-color: #81BEF7; }

<table id="tblContainer">

        <tr>
            <td>
                <input type="radio" name="book" value="book1" /> Book 1</td>
            <td>
                <input type="radio" name="book" value="book2" /> Book 2</td>
            <td>
                <input type="radio" name="book" value="book3" /> Book 3</td>
                            <td>
                <input type="radio" name="book" value="book4" /> Book 4</td>
     </tr>
</table>

Javascript:

// highlight checked radion button
            $('#tblContainer :radio').click(function() {

            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');
                if ($(this).is(':checked')) {
                    cell.addClass('highlight-blue');
                }
                else {
                //remove highlight class
                    cell.removeClass('highlight-blue');
                }

            });

The problem is that it doesn't remove the class from the previous selected radio buttons.

Update 1: See new updated mark-up here

I'm using jQuery 1.4. I'm trying to highlight the <td> tag of a Table everytime that a radio button inside that "<td>" is selected and remove the highlight class if it's not selected.

Here's the mark-up:

CSS: .highlight-blue { background-color: #81BEF7; }

<table id="tblContainer">

        <tr>
            <td>
                <input type="radio" name="book" value="book1" /> Book 1</td>
            <td>
                <input type="radio" name="book" value="book2" /> Book 2</td>
            <td>
                <input type="radio" name="book" value="book3" /> Book 3</td>
                            <td>
                <input type="radio" name="book" value="book4" /> Book 4</td>
     </tr>
</table>

Javascript:

// highlight checked radion button
            $('#tblContainer :radio').click(function() {

            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');
                if ($(this).is(':checked')) {
                    cell.addClass('highlight-blue');
                }
                else {
                //remove highlight class
                    cell.removeClass('highlight-blue');
                }

            });

The problem is that it doesn't remove the class from the previous selected radio buttons.

Update 1: See new updated mark-up here http://jsbin./egusud/7

• javascript
• jquery
• jquery-selectors

4 Answers 4

Yes, you'll want to go up to the row level (if the radio buttons are just related to each other in the row) or table level (if they're related to each other across rows).

Assuming only within row (live example):

$('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight
    $this.closest("tr").find("td.highlight-blue").removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
});

Note that you only get a click on a radio button if it's the selected one, so no need to check.

Off-topic: Those radio buttons will be easier for people to click if you add labels (live copy):

<label><input type="radio" name="book" value="book1"> Book 1</label>

If so, you might want to add this CSS style to the labels (live copy):

label {
    cursor: pointer;
}

...to make it more obvious that they can be clicked.

Update: From the ments, it appears your radio buttons are in different rows from each other, and that you have other radio buttons mixed in as well, like this:

<table id="tblContainer">
  <thead>
    <tr>
      <th>Books</th>
      <th>Magazines</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book1"> Book 1</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine1"> Magazine 1</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book2"> Book 2</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine2"> Magazine 2</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book3"> Book 3</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine3"> Magazine 3</label>
      </td>
    </tr>
  </tbody>
</table> 

In which case, to remove the class from the old one, you just have to find the other radio buttons with the same names, then their parent cells with that class (live copy):

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight from cells containing
    // radio buttons with this same name
    $this
      .closest("table")
      .find('input:radio[name="' + this.name + '"]')
      .closest("td.highlight-blue")
      .removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
  });

});

Or alternately, the "marker class" approach (here I've used "rb-" plus the radio button's name, but you'll want to be sure the radio button names are valid for class names) (live copy):

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove previous highlight if any
    $("td.highlight-blue.rb-" + this.name).removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue rb-" + this.name);
  });

});

$("#tbl_ClientSites > tbody > tr").live("click", function() {
        var trInstance = $('#tbl_ClientSites > tbody').find('tr');                   
                trInstance.removeClass('highlighted');
                trInstance.find('tr:eq(0)').removeClass('highlighted');
                var instance = $(this);
                instance.addClass('highlighted');
                instance.find('tr:eq(0)').addClass('highlighted');      
    });

Previously selected row highlighted is removed. current clicked row is highlighted.

$('#tblContainer :radio').click(function() {
//remove highlight from all
$('#tblContainer td').removeClass('highlight-blue')
            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');


                    cell.toggleClass('highlight-blue');


            });

If you want to remove the class from the previously selected radio buttons, you have to loop through all the radio buttons and remove the class, except for $(this). Or you can use ID instead of class, and then you just remove the ID from the previously selected one, and add it to the new one.