user3575652
user3575652

Reputation: 155

Highlight two class of checkbox with different colour

I have a table containing two columns of checkboxes used for two different purpose. I want to highlight them when clicked with two different colours. How to edit my code to get the desired result

<style>
    a1.highlight {
        background-color:grey;
    }

    a2.highlight {
        background-color:red;
    }
</style>

echo "<td align='center'><input type='checkbox' name='cb1[$no]' id='cb1{$no}' class='a1'></td>";
echo "<td align='center'><input type='checkbox' name='cb2[$no]' id='cb2{$no}' class='a2'></td>";

Upvotes: 2

Views: 57

Answers (1)

Josh Bolton
Josh Bolton

Reputation: 768

It seems you have the CSS in-place for the colours and the only thing missing is the event to change the colour.

To do this you could use some pretty simple jQuery like so:

$('.a1,.a2').click(function(){
    $(this).addClass('highlighted');
});

The above will attach the highlighted class once either a1 or a2 has been clicked on.

Upvotes: 3

Related Questions