javascript - 仅突出显示包含复选框的单元格

Question

我有一个表格，其中除了最后一列是复选框之外，所有列都有背景颜色。我需要使用 jquery 仅在选中复选框时突出显示单元格，并在未选中时取消突出显示。我不想突出显示整行，因为由于背景颜色，它看起来不正确，这就是为什么我只希望带有复选框的 td 在选中时突出显示。帮助!

JSP:

<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 bgcolor='<c:out value="${summary.color}"></c:out>'> 
     <c:outvalue="${summary.source}" />
            </td>
<c:if test="${isAll == 'false'}">
<td align='center'></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>

JS:

    $('input[name=summaryCheckbox]:checkbox').unbind("click").click(summaryCheckboxHandler);
     function summaryCheckboxHandler(){
    var val = $(this).val();
    var vals = val.split(",");
    if( $(this).is(":checked") ){       
        labelNbrs += vals[0] + ',';
        loadDates += vals[1] + ',';
        eventInd = vals[2];
    }else{
        labelNbrs = labelNbrs.replace(vals[0]+',', '');
        loadDates = loadDates.replace(vals[1]+',', '');
    }   
}

Answer 1

您可以查看 demo here

    $(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: red;}