根据复选框更改表单元格背景颜色

Question

所以我现在有一张桌子和一些复选框：

https://jsfiddle.net/1o7phmkL/

我正在尝试根据选中的复选框更改每个“单元格”的背景颜色。例如，如果用户要选择星期一和星期六复选框，则表格中的星期一和星期六单元格将获得红色的背景颜色，并且仅获得具有数字的背景颜色。

<form action="" method="get">
  <input type="checkbox" name="Monday" value="Monday">Monday<br>
  <input type="checkbox" name="Tuesday" value="Tuesday">Tuesday<br>
  <input type="checkbox" name="Wednesday" value="Wednesday">Wednesday<br>
  <input type="checkbox" name="Thursday" value="Thursday">Thursday<br>
  <input type="checkbox" name="Friday" value="Friday">Friday<br>
  <input type="checkbox" name="Saturday" value="Saturday">Saturday<br>
  <input type="checkbox" name="Sunday" value="Sunday">Sunday<br>
</form>

我在网上看到了一个如何工作的例子但我只能找到使用javascript的例子，其中“最接近的”td被改变了。

提前致谢。

Answer 1

试试这个：<script>var boxes = document.getElementsByTagName("input") for (var i = 0; i < boxes.length; i++) { if (boxes[i].checked) {boxes[i].style.backgroundColor = "red";}}</script>

Answer 2

将以下代码添加到js并尝试

$(document).on("click",':checkbox',function(){
var val= $(this).val();
val=val.substring(0, 3);
if(this.checked){
selected_Index = $('th:contains("'+val+'")').index()+1;
//console.log(ownerIndex);
$('table tr td:nth-child('+selected_Index+')').css("background","#36ac3b");
}
else
{
$('table tr td:nth-child('+selected_Index+')').css("background","initial");
}
});

见小提琴：

https://jsfiddle.net/1o7phmkL/1/

Answer 3

下面的代码可以帮助您找到答案

＆＃13;

＆＃13;

$(document).ready(function(e) {
    $('input[type=checkbox]').change(function() {
		var columnNo = $(this).val();
		if ($(this).is(':checked')) {
			
			$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
               if($(this).html()!= ' ') $(this).css("background-color","#F00");
            });
			
		} else {
			$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
               if($(this).html()!= ' ') $(this).css("background-color","#FFF");
            });
		}
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
  <input id="1" type="checkbox" name="Monday" value="2">Monday<br>
  <input id="2" type="checkbox" name="Tuesday" value="3">Tuesday<br>
  <input id="3" type="checkbox" name="Wednesday" value="4">Wednesday<br>
  <input id="4" type="checkbox" name="Thursday" value="5">Thursday<br>
  <input id="5" type="checkbox" name="Friday" value="6">Friday<br>
  <input id="6" type="checkbox" name="Saturday" value="7">Saturday<br>
  <input id="0" type="checkbox" name="Sunday" value="1">Sunday<br>
</form>




<table border=1 cellpadding=2 class="calander" >

<tr>

<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat

 </tr>
<tr>

<td> <td> <td> <td> <td>1 <td>2 <td>3

</tr>

<tr>

<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10

</tr>

<tr>

<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17

</tr>

<tr>

<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24

</tr>

<tr>

<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>

</tr>

</table>

＆＃13;

＆＃13;

＆＃13;