CODEWITHSUNDEEP
javascriptjquerycheckbox
Fahad
Fahad

Reputation: 403

Highlight only the cell that's containing a check box

I have a table in which all the columns have background color except the last column which is check boxes. I need to use jquery to highlight the cell only when check box is checked and un highlight when unchecked. I dont want to highlight the entire row because it wont look right because of the background color that's why i only want the td with check box to highlight when checked. HELP!

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]+',', '');
    }   
}

Upvotes: 0

Views: 203

Answers (2)

KKS
KKS

Reputation: 3630

You can check the 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 is

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

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

You can target the parent TD and set the background color:

if( $(this).is(":checked") ){       
    labelNbrs += vals[0] + ',';
    loadDates += vals[1] + ',';
    eventInd = vals[2];
    $(this).parent("td").css("background", "color"); // <-- I would prefer making a CSS class called "active" then using the toggleClass().
} else {
    labelNbrs = labelNbrs.replace(vals[0]+',', '');
    loadDates = loadDates.replace(vals[1]+',', '');
    $(this).parent("td").css("background", "color");

}

As I say in the comments above, consider using a CSS class called "active" then achieving this with the toggleClass() function

Upvotes: 1

Related Questions