gpt4 book ai didi

javascript - 选中复选框时表格行背景颜色发生变化

转载 作者:行者123 更新时间:2023-12-02 14:38:01 25 4
gpt4 key购买 nike

我正在 PHP 中编写一个脚本,其中数据来自 mysql 数据库。我的要求是,如果复选框已被选中(数据来自数据库),则表行颜色应该是不同的颜色,它只是为了突出显示用户已选中并需要注意。如果用户取消选中背景颜色需要关闭,还应该有一个选项。我已经编写了脚本,如果已经检查过它显示红色背景颜色。但是当我取消选中它时,它不起作用。任何人都可以指导我吗?我的脚本如下:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
$('input:checked').parent().css('background-color', '#ff0000');
});
});
</script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(":checkbox").on("change", function() {
$(this).parent().toggleClass("checked", this.checked);
});
});//]]>

</script>
<style type="text/css">
.checked {
background-color: #ff0000;
}
</style>
</head>

<body>
<div class="company">
<input type="checkbox" name="Selected[]" class="checkboxC" value="8">
Company 8
</div>
<div class="company">
<input type="checkbox" name="Selected[]" class="checkboxC" value="9" checked>
Company 9
</div>
</body>
</html>

最佳答案

$(window).load(function() {
$(":checkbox").on("change", function() {
$(this).parent().toggleClass("checked", this.checked);
});
});
$(window).load(function() {
$(function() {
$('input:checked').parent().toggleClass("checked", this.checked);//use .parent().toggleClass("checked", this.checked)
});
});
.checked {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="company">
<input type="checkbox" name="Selected[]" class="checkboxC" value="8">Company 8
</div>
<div class="company">
<input type="checkbox" name="Selected[]" class="checkboxC" value="9" checked>Company 9
</div>

关于javascript - 选中复选框时表格行背景颜色发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37267438/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com