I am working on a script in PHP where the data is coming from mysql db. My requirement is if the checkbox is already checked (data coming from db) the table row color should be a different color, its just to highlight the user that its been checked and attention is required. There should be also be an option if the user unchecks it the background color needs to go off. I have worked on the script and if already checked its showing a red bg color. But when i uncheck it, its not working. Can anyone pls guide me on this. My script is below:
我正在使用PHP中的脚本,其中数据来自mysql db。我的要求是如果已经选中了复选框(来自db的数据),表格行颜色应该是不同的颜色,它只是突出显示用户已经检查并需要注意。如果用户取消选中背景颜色需要关闭,也应该有一个选项。我已经处理了脚本,如果已经检查它显示红色bg颜色。但是,当我取消选中它时,它不起作用。任何人都可以指导我这个。我的脚本如下:
<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>
1 个解决方案
#1
2
$(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>#1
2
$(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>