如果选中复选框，如何更改我的 div 的颜色？

Question

我有一个基于数据库记录创建的表。在 tbody 内部，我有 tr 创建每个表行。表格行有多个相同日期的时间段。如果选中复选框，我想更改时间块的背景颜色。我让我的复选框开始工作，我用警报和里面的一些文本进行了测试。现在我正在尝试更改背景颜色，但到目前为止我尝试过的这种情况下没有任何效果。这是我的代码：

 <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 脚本：

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    $(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});

还有我的 CSS：

.red{
   background-color:red; 
}

这是我更新的工作代码。第一个问题是在我的代码的 html 结构中。其次，如果我使用 document.getElementById('') ，无论我点击哪一行，我都只会得到第一行更改的背景颜色。所以我不得不使用getElementByClassName。无论如何，我决定使用 JQuery addClass/removeClass。感谢大家对这个问题的帮助。

Answer 1

试试这个：

$('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:

https://jsfiddle.net/3s83gj70/2/

这将获得最接近当前复选框的块行，因此应该与多个实例一起使用。由于您不能有 2 个具有相同 id 的元素，因此我将 blockrow 更改为该类。

如果你想基于相同的条件做其他事情，那么你可以这样做：

$('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
    }
});

Answer 2

简单：

 $('#blockRow').css("background-color","red")
 ------------------------------^

编辑

那么你不包括 jQuery 库。要制作纯js，请这样做：

http://jsfiddle.net/bfss81sa/

 document.getElementById("box").style.backgroundColor = "red";

这里是完整的 sn-p：

  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>

Answer 3

您的 html 代码是一团糟。无论如何，一般来说：

$('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');
 }
});

当然，您可以缩小 input:checkbox 选择器的范围。 如果它不是您的<tr> 中的第一个<td>，那么您最好为它分配一个类并使用它。

注意：DOM 必须正确 <cfoutput> 不能是 <tr> 的子级； <div> 不能将 <td> 作为直接子代；不正确的 DOM 会影响 javascript 遍历。