CODEWITHSUNDEEP
css
Dushee
Dushee

Reputation: 255

Specify highlight color for each checkbox

I have 3 check box. When one checkbox clicked record of table should be highlighted in red. when second checkbox clicked record of table should be highlighted in green and when third checkbox clicked record of table should be highlighted in yellow. I have the code to highlighted record with yellow. Can somebody helps me with other two. How can I specify color for each checkbox? 

.highlight {
    background-color: yellow;
}     

<div class="col-lg-10">
    <table id="Table" border="1">
        <tr>
        <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
        <td>Click me</td>
        </tr>
    </table>
</div>

Upvotes: 0

Views: 78

Answers (2)

DarkseidNG
DarkseidNG

Reputation: 92

You can do it like this, Of-course you can optimize that but you can see how it is done with javascript using jquery 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
.highlight-red {
    background-color: red;
}    
.highlight-green {
    background-color: green;
}
.highlight-yellow {
    background-color: yellow;
}    
</style>
<div class="col-lg-10">
    <table id="Table" border="1">
        <tr class="highlight">
        <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
        <td>Click me</td>
        </tr>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	
	function changeSoma(data, color){
			if(data.checked && color == 'red'){
				$(data).parent().parent().addClass("highlight-red");
			}
			else{
				$(data).parent().parent().removeClass("highlight-red");
			}
			if(data.checked && color == 'green'){
				$(data).parent().parent().addClass("highlight-green");
			}
			else{
				$(data).parent().parent().removeClass("highlight-green");
			}
			if(data.checked && color == 'yellow'){
				$(data).parent().parent().addClass("highlight-yellow");
			}
			else{
				$(data).parent().parent().removeClass("highlight-yellow");
			}
	}
</script>
</body>
</html>

Upvotes: 1

Sletheren
Sletheren

Reputation: 2486

you'll do as follow:

.cb3 {background-color:yellow;}
.cb2 {background-color:green;}
.cb1 {background-color:red;}

and then the JS (using jquery per example)

$('#cb3').onclick(function(){
$(your table).addClass('cb3');
});

this will color the table depending on the clicked element, if cliucking on cb3 then it will apply the cb3 class (that has yelllow background)

Upvotes: 0

Related Questions