选中输入复选框后尝试应用CSS文本修饰
选中输入复选框后尝试应用CSS文本修饰
提问于 2020-08-08 01:17:36
我有一个问题，试图应用CSS样式的兄弟元素后，输入的复选框已被选中。我的目标是将划线和文本装饰颜色红色的文本装饰应用到同级元素。
演示：enter link description here
input:checked + td.p1Amount {
text-decoration: line-through;
text-decoration-color: red;
}<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input type="checkbox"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
选中复选框后，我是否没有使用正确的CSS选择器来选择同级？
回答 2
Stack Overflow用户
发布于 2020-08-08 02:00:16
您可以使用vanilla js来完成此操作。
document.querySelector(".checkbox").onchange = function(){
var check = document.querySelector("input").checked;
if(check == true){
document.querySelector(".p1Amount").style.textDecoration = "line-through";
document.querySelector(".p1Amount").style.textDecorationColor = "red";
}else {
document.querySelector(".p1Amount").style.textDecoration = null;
document.querySelector(".p1Amount").style.textDecorationColor = null;
}
} ;<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input class="checkbox" type="checkbox"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2020-08-08 02:25:53
我使用了JQuery。请尝试这个...
(function ($) {
$(document).ready(function(){
$(".check").click(function(){
if($(".check").prop('checked')){
$(".p1Amount").css("text-decoration","line-through");
$(".p1Amount").css("text-decoration-color","red");
}else{
$(".p1Amount").css("text-decoration","");
$(".p1Amount").css("text-decoration-color","");
}
});
});
}(jQuery));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table-sm table-responsive">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Due Date</th>
<th scope="col">Paid</th>
<th scope="col">Amount</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility</th>
<td>05/15/2020</td>
<td><input type="checkbox" class="check"></td>
<td class="p1Amount">$1.00</td>
<td>Confirmation #5477ff59de</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63306501
复制相关文章
相似问题
腾讯云开发者
