Angeben der Markierungsfarbe für jede Checkbox

Ich habe 3 Kontrollkästchen. Wenn ein Kontrollkästchen angeklickt wurde, sollte der Datensatz der Tabelle rot hervorgehoben sein. Wenn das zweite Kontrollkästchen angeklickt wurde, sollte der Datensatz der Tabelle grün hervorgehoben werden, und wenn das dritte Kontrollkästchen angeklickt wurde, sollte der Datensatz der Tabelle gelb hervorgehoben werden. Ich habe den Code zum markieren mit gelb aufnehmen. Kann mir jemand mit zwei anderen helfen? Wie kann ich für jedes Kontrollkästchen eine Farbe festlegen?Angeben der Markierungsfarbe für jede 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>

Quelle

2017-07-27 Dushee

Warum nicht verwenden Sie Javascript onchange Eigenschaft für dieses getan wird? – DarkseidNG

Wie kann ich das verwenden? – Dushee

Sie können es so machen, Of-cour se Sie können das optimieren, aber Sie können sehen, wie es mit Javascript mit 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> 
 
\t 
 
\t function changeSoma(data, color){ 
 
\t \t \t if(data.checked && color == 'red'){ 
 
\t \t \t \t $(data).parent().parent().addClass("highlight-red"); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $(data).parent().parent().removeClass("highlight-red"); 
 
\t \t \t } 
 
\t \t \t if(data.checked && color == 'green'){ 
 
\t \t \t \t $(data).parent().parent().addClass("highlight-green"); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $(data).parent().parent().removeClass("highlight-green"); 
 
\t \t \t } 
 
\t \t \t if(data.checked && color == 'yellow'){ 
 
\t \t \t \t $(data).parent().parent().addClass("highlight-yellow"); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $(data).parent().parent().removeClass("highlight-yellow"); 
 
\t \t \t } 
 
\t } 
 
</script> 
 
</body> 
 
</html>

Quelle

2017-07-28 08:13:34 DarkseidNG

Danke Mr.DarkseidNG. Es funktionierte – Dushee

Froh, dass ich helfen könnte, wäre ein Up-Vote auch cool – DarkseidNG

Ich stimme deine Antwort Herr.Darkseide. Kannst du mir erklären, ob es möglich ist, das Klickergebnis auch während der Seitenauffrischung gleich zu halten? Jetzt versuche ich, den Teil – Dushee

Sie wie folgt tun:

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

und dann die JS (mit Jquery pro Beispiel)

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

dies die Tabelle Farbe auf dem geklickten Element abhängig, wenn cliacking auf cb3 dann wird es die cb3-klasse anwenden (das hat yelllow-hintergrund)

Quelle

2017-07-27 09:54:00 Sletheren

Danke Mr.Sletheren. Leider hat es nicht funktioniert. Ich habe meine Frage inklusive Code in voller Länge bearbeitet. Kannst du es bitte sehen und mir eine Lösung geben? – Dushee

Angeben der Markierungsfarbe für jede Checkbox

Antwort

Verwandte Themen