javascript - 选中复选框时突出显示表格行

Question

选中复选框时需要突出显示整行，取消选中时移除突出显示。我当前的代码仅突出显示复选框单元格而不是整行。帮助!

JSP:

 <tbody>
<c:forEach items="${summary}" var="summary">

<tr>
<td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.eventDesc}" />
</td>
 <td bgcolor='<c:out value="${summary.color}"></c:out>'><a
                href="/analysis/loadAnalysisDetailFromSummary?labelNbr=${summary.labelNbr}&loadDate=${summary.loadDate}"><c:out
                        value="${summary.labelNbr}" /> </a>
            </td>

        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.origin}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.senderName}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.receiverName}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.receiptDate}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.loadDate}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.forecastIsc}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.actualIsc}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.country}" />
            </td>
    <td id="td1" bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.source}" />
            </td>
<c:if test="${isAll == 'false'}">
    <td align='center' bgcolor='<c:out value="${summary.color}"></c:out>'>
    <input name='summaryCheckbox' type="checkbox" class="cbx" 
 value='<c:out value="${summary.labelNbr}"></c:out>,<c:out   
  value="${summary.loadDate}"></c:out>,
      <c:out value="${summary.eventInd}"></c:out>'>
            </td>
            </c:if>
        </tr>

    </c:forEach>
</tbody>  

J查询:

$(document).ready(function(){
  $("input[type='checkbox']").change(function(e) {
    if($(this).is(":checked")){ 
   $(this).closest('td').addClass("highlight");

  }
    else{
      $(this).closest('td').removeClass("highlight");
    }
  });
});

CSS:

table{border: 1px solid;}
.highlight{background: #C0C0C0;}   

Answer 1

$(function(){
    $("input[type='checkbox']").on('change', function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
    });
});