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

我有根据数据库记录创建的表。在 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>

JavaScript：

$('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。感谢大家对这个问题的帮助。

尝试这个：

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