Question

我有一个表格，每行都有复选框供选择。一次只能检查一个盒子（类似于收音机）。选中一个方框时，该行会亮起。取消选中此框时，将删除突出显示。但是，当选中此框并且我先检查另一个框而不先取消选中第一个框时，突出显示仍然存在。

如何删除之前复选框的突出显示？

HTML 生产厂家牌制造商的ID 制造商的描述包装尺寸

        </td>
        <td>TYSON</td>
        <td>BTRBALL</td>
        <td>723830124567788</td>
        <td>4.0oz Savory White Turkey Burger</td>
        <td>40/4oz</td>
        <td>
            <input type="checkbox" class="checkbox" name="productMatch" />
        </td>
    </tr>
    <tr>
        <td><i class="fa fa-plus collapse collapsed" data-toggle="collapse" data-target="#2"></i>

        </td>
        <td>TYSON</td>
        <td>BTRBALL</td>
        <td>723830124567788</td>
        <td>4.0oz Savory White Turkey Burger</td>
        <td>40/4oz</td>
        <td>
            <input type="checkbox" class="checkbox" name="productMatch" />
        </td>
    </tr>
</tbody>

的jQuery

// allow only one checkbox to be checked.
$(".checkbox").click(function() {           
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";          
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

$(".checkbox").change(function () {
    $(this).closest("tr").toggleClass("highlight", this.checked);
});

这是我的代码的fiddle

提前致谢！

Answer 1

你可以这样做：

$(".checkbox").change(function () {

$(this).closest("tbody").find("tr.highlight").removeClass("highlight").find(":checkbox").prop("checked",false);
$(this).closest("tr").toggleClass("highlight", this.checked);

});

Answer 2

以下是您可以使用的方法：

// highlight row when checkbox is checked.
$(":checkbox").change(function() {
    // Highlight the current checkbox row
    $(this).closest("tr").toggleClass("highlight", this.checked);
    // Uncheck all other checkboxes, then remove the highlight class from their rows
    $(':checkbox').not(this).prop('checked', false).closest('tr').removeClass('highlight');
});

Fiddle

删除以前选中的行的突出显示

2 个答案: