jQuery Multiple Selector with split

Question

I have this row with two <td> 's with classes messageROW and titleROW following a checkbox with the ID of ' activecd '. I'm trying to change the bg color of both messageROW and titleROW (the whole row) when the checkbox is toggled but instead titleROW only changes colors.

Any suggestions?

$('[id^=activecd]').change(function(){
    $('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});

HTML :

 <tr> <td class="messageROW"></td> <td class="titleROW"></td> <td><input id="activecd"></td> </tr> 

Answer 1

I'd suggest the following, albeit untested:

$('[id^=activecd]').change(function(){
    $(this).closest('tr').toggleClass('colorcode', this.checked);
});

This listens for the change event on the specified element(s), finds the closest tr element and adds the colorcode class if the checkbox is checked, and removes the class if not.

Answer 2

Try jQuery $().add(selector) , $().toggleClass("bgOn") with css

<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>

Not clear question, I think.

<button onclick="someFunction(this)">Toggle color</button>

function someFunction(this){
  var $this=$(this);
  $this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
  // or
  $this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}

might help you.