向子单元事件触发的表单元格中添加类/从表单元格中删除类

Question

我正在使用jQuery 1.4。 每当尝试选择"<td>"中的单选按钮时，我都试图突出显示Table的<td>标记，如果未选中突出显示类，则尝试删除它。

这是标记：

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

            });

问题在于它不会从先前选择的单选按钮中删除该类。

更新1：在此处查看新的更新标记http://jsbin.com/egusud/7

Answer 1

是的，您将要升至行级（如果单选按钮在行中彼此仅相关）或表级（如果它们在各行中彼此相关）。

假设仅在行内（ 实时示例 ）：

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

请注意，如果仅选中一个单选按钮，则只需单击它，因此无需检查。

---

离题 ：如果添加label s（ 实时复制 ），这些单选按钮将使人们更容易单击：

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

如果是这样，您可能想将此CSS样式添加到标签（ 实时复制 ）中：

label {
    cursor: pointer;
}

...以便更明显地可以单击它们。

---

更新 ：从注释中可以看出，您的单选按钮位于彼此不同的行中，并且还混有其他单选按钮，如下所示：

<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> 

在这种情况下，要从旧的类中删除该类，只需找到其他具有相同名称的单选按钮，然后找到具有该类的父单元格（ 实时复制 ）：

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

});

或者，也可以使用“标记类”方法（这里我使用了“ rb-”加上单选按钮的名称，但是您需要确保单选按钮的名称对类名有效）（ 实时复制 ）：

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

});

Answer 2

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

先前选择的突出显示的行将被删除。 当前单击的行突出显示。

Answer 3

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


            });

Answer 4

如果要从先前选择的单选按钮中删除该类，则必须遍历所有单选按钮并删除该类，但$（this）除外。 或者，您可以使用ID代替类，然后只需从先前选择的ID中删除ID，然后将其添加到新ID中即可。