Question

我有3个复选框。当单击一个复选框时，表格的记录应以红色突出显示。当第二个复选框点击表格时，应以绿色突出显示，当第三个复选框点击时，表格的记录应以黄色突出显示。我有用黄色突出显示记录的代码。有人可以帮助我和其他两个人。如何为每个复选框指定颜色？

{{1}}

Answer 1

你可以这样做，当然你可以优化它但你可以看到如何用javascript使用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>

Answer 2

您将按照以下方式执行操作：

.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背景）

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

2 个答案: