指定每个复选框的高亮颜色

问题描述：

我有3个复选框。当一个复选框点击桌子的记录应该以红色突出显示。当第二个复选框单击桌面的记录应以绿色突出显示时，第三个复选框单击桌面的记录应以黄色突出显示。我的代码用黄色突出显示记录。有人可以帮助我和其他两个人。我怎样才能为每个复选框指定颜色？指定每个复选框的高亮颜色

.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>

你为什么不使用JavaScript的onchange属性用于此看到它是如何使用JavaScript做了什么？ – DarkseidNG

我该如何使用它？ – Dushee

答

你可以这样做，Of-cour SE你可以优化，但你可以使用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>

谢谢Mr.DarkseidNG。它的工作 – Dushee

很高兴我可以帮助，一个投票也会很酷 – DarkseidNG

我投了你的答案mr.Darkseid。你能解释我吗？即使在页面刷新期间，是否有任何方法使点击结果保持不变？现在我正在努力做到这一点 – Dushee

答

你会做如下：

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

，然后JS（使用每例如jQuery的）

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

这将色彩表取决于点击的元素上，如果在cb3 cliucking然后它将应用cb3类（有yelllow背景）

谢谢Mr.Sletheren。不幸的是它没有奏效。我编辑了我的问题，包括全长代码。你能看到它并给我一个解决方案吗？ – Dushee

指定每个复选框的高亮颜色

相关推荐