Need to highlight the entire row when check box is checked and remove highlight when unchecked. My current code highlights just the check box cell not the entire row. HElp!

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>  

Jquery:

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

Need to highlight the entire row when check box is checked and remove highlight when unchecked. My current code highlights just the check box cell not the entire row. HElp!

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>  

Jquery:

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

• javascript
• jquery
• checkbox
• jquery-selectors

• Please post the rendered HTML, not whatever that is. – j08691 Commented Apr 16, 2013 at 19:58

3 Answers 3

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

The problem here is that when you switch it from closest("td") to closest("tr") it is working [it sets the class], but the CSS is wrong. You need to add the background color to the cell, not the row.

Your CSS

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

Needs to be

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

Notice the TD after highlight.

use .closest('tr')

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