[英]How to change color of my div if check-box is checked?
I have table that is created based on records from data base. 我有基于数据库中的记录创建的表。 Inside of tbody I have tr that creates each table row.
在tbody内部,我有tr来创建每个表行。 Table row has multiple time slots for same date.
表格行在同一日期有多个时间段。 I want to change background color of my time block if check box is checked.
如果选中复选框,我想更改时间块的背景色。 I got my check box to work, I did test with alert and some text inside.
我的复选框可以使用,我对警报和其中的一些文本进行了测试。 Now I'm trying to change the background color but nothing works in this case that I tried so far.
现在,我正在尝试更改背景颜色,但到目前为止,在这种情况下,没有任何效果。 Here is my code:
这是我的代码:
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
</tr>
<cfoutput>
<tr class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
Java script: Java脚本:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
and my css: 和我的CSS:
.red{
background-color:red;
}
This is working code that I updated. 这是我更新的工作代码。 Problem number one was in html structure of my code.
第一个问题是我代码的html结构。 Second If I used document.getElementById('') I was getting only first row chnaged background-color, no matter which row I click on.
第二,如果我使用document.getElementById(''),则无论单击哪一行,都只会得到第一行的背景色。 So I have had to use getElementByClassName.
所以我不得不使用getElementByClassName。 Anyway I decided to use JQuery addClass/removeClass.
无论如何,我决定使用JQuery addClass / removeClass。 Thanks everyone for help with this problem.
感谢大家对这个问题的帮助。
Try this: 尝试这个:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
.red{
background-color:red;
}
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
<cfoutput>
<div class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</div>
</cfoutput>
</tr>
</tbody>
</cfoutput>
jsfiddle: jsfiddle:
https://jsfiddle.net/3s83gj70/2/ https://jsfiddle.net/3s83gj70/2/
This gets the closest blockrow to the current checkbox so should work with more than one instance. 这将获得最接近当前复选框的块,因此应与多个实例一起使用。 Since you can't have 2 elements with the same id I have change blockrow to the class.
由于您不能有2个具有相同ID的元素,因此我对该类进行了更改。
If you want to do other things based on the same condition then you can do this: 如果您要基于相同条件执行其他操作,则可以执行以下操作:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
if($(this).is(":checked")){
div.addClass("red");
//checkbox is checked, do something
}
else
{
div.removeClass("red");
//checkbox is not checked, do something else
}
});
Easy: 简单:
$('#blockRow').css("background-color","red")
------------------------------^
Then you don't include jQuery library. 然后,您不包括jQuery库。 To make pure js make this:
要制作纯js,请执行以下操作:
http://jsfiddle.net/bfss81sa/ http://jsfiddle.net/bfss81sa/
document.getElementById("box").style.backgroundColor = "red";
Here you are the complete snippet: 这是完整的代码段:
var cbs = document.querySelectorAll('input[type=checkbox]'); for(var i = 0; i < cbs.length; i++) { cbs[i].addEventListener('change', function() { if(this.checked) { document.getElementById("box").style.backgroundColor = "red"; } else { document.getElementById("box").style.backgroundColor = "transparent"; } }); }
<input type="checkbox" name="block" id="block"> <div id="box"> The box </div>
Your html code is a mess. 您的html代码一团糟。 Anyway, generally :
无论如何,通常:
$('input[type=checkbox]').click(function() {
if($(this).is(':checked') {
$(this).parents('tr').find('td:first').css('background', 'red');
} else {
$(this).parents('tr').find('td:first').css('background', 'white');
}
});
Of course, you can narrow the scope of input:checkbox selector. 当然,您可以缩小input:checkbox选择器的范围。 If it is not the FIRST
<td>
in your <tr>
then you better assign it a class and get it with it. 如果它不是您的
<tr>
第一个<td>
,那么最好为它分配一个类并与之一起使用。
NOTE : DOM must be correct <cfoutput>
cannot be child of <tr>
; 注意:DOM必须正确。
<cfoutput>
不能是<tr>
; <div>
cannot have <td>
as direct child; <div>
不能将<td>
作为直接子级; Incorrect DOM impact javascript traversing. 不正确的DOM影响javascript遍历。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.