Question

我正在使用jQuery 1.4。每次选中<td>内的单选按钮时，我都会尝试突出显示表的"<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

是的，你想要达到行级别（如果单选按钮只是在行中相互关联）或表级别（如果它们在行之间彼此相关）。

假设只在行（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");
});

请注意，只有单击一个单选按钮才能选中它，因此无需检查。

偏离主题：如果您添加label s（live copy），那么这些单选按钮会让人们更容易点击：

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

如果是这样，您可能希望将此CSS样式添加到标签（live copy）：

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>

在这种情况下，要从旧的类中删除类，您只需找到具有相同名称的其他单选按钮，然后查找具有该类（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");
  });

});

或者，“标记类”方法（这里我使用“rb-”加上单选按钮的名称，但你要确保单选按钮名称对类名有效）（{{3 }}）：

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

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

4 个答案: