Javascript 如果选中复选框，如何更改我的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>

还有我的css：

.red{
   background-color:red; 
}

这是我更新的工作代码。第一个问题是我代码的html结构。第二，如果我使用document.getElementById（“”），无论单击哪一行，我都只得到第一行的背景色。所以我不得不使用getElementByClassName。无论如何，我决定使用jqueryaddclass/removeClass。感谢大家对此问题的帮助。

简单：

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

编辑 那么就不包括jQuery库。要制作纯js，请执行以下操作：

以下是完整的代码片段：

var cbs=document.querySelectorAll（'input[type=checkbox]）；
对于（变量i=0；i

盒子

简单：

编辑 那么就不包括jQuery库。要制作纯js，请执行以下操作：

以下是完整的代码片段：

var cbs=document.querySelectorAll（'input[type=checkbox]）；
对于（变量i=0；i

盒子

试试这个：

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

试试这个：

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

---

你的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');
 }
});

当然，您可以缩小输入范围：复选框选择器。 如果它不是您的

中的第一个

，那么您最好为它分配一个类，并随它一起获取它

---

注意：DOM必须正确

不能是

的子级

不能将

作为直接子级；不正确的DOM影响javascript遍历。

您的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');
 }
});

当然，您可以缩小输入范围：复选框选择器。 如果它不是您的

中的第一个

，那么您最好为它分配一个类，并随它一起获取它

---

---

注意：DOM必须正确

不能是

的子级

不能将

作为直接子级；不正确的DOM影响javascript遍历。

你能发布你得到的错误吗？

$（'#blockRow'）。css（“backgroundcolor”，“red”）

应该是camelCase:

$（'#blockRow'）。css（“backgroundcolor”，“red”）

在你的jQuery调用中，对于css的更改，“backgroundcolor”需要与css中的“backgroundcolor”完全相同。Idk如果这是问题，尽管我没有收到任何错误，这是问题所在，但我找不到问题所在。如果我使用alert，每次单击复选框时，我的代码都会给我文本。您是否有多个ID为

#blockRow

的元素？在这种情况下，您应该使用classCan发布您得到的错误。css（“backgroundcolor”，“red”）应该是camelCase:

$（“#blockRow”）。css（“backgroundcolor”，“red”）

在jQuery调用css更改时，“backgroundcolor”需要与css中的“backgroundcolor”完全相同。Idk如果这是问题，尽管我没有收到任何错误，这是问题所在，但我找不到问题所在。如果我使用alert，每次单击复选框时，我的代码都会给我文本。您是否有多个ID为

#blockRow

的元素？在本例中，您应该使用classYou假设包含jQuery库。相当简单：）如此简单。此代码在我的表外更改颜色。但至少在点击上有效。所以我猜标签有问题。可能是结构不正确的html。在示例中显示最终的html输出，因为它不是有效的html。DOM必须正确。我使用了您的代码，而不是parents（'div'），而是parents（'tr'）。我有一个问题，如果我点击第一行，我所有的td都会改变颜色。但对于所有其他行来说都可以。所以，我想要所有的td，但第一个保存日期的td除外。这就是我使用div的原因，但它不起作用。您假设包含jQuery库。相当简单：）如此简单。此代码在我的表外更改颜色。但至少在点击上有效。所以我猜标签有问题。可能是结构不正确的html。在示例中显示最终的html输出，因为它不是有效的html。DOM必须正确。我使用了您的代码，而不是parents（'div'），而是parents（'tr'）。我有一个问题，如果我点击第一行，我所有的td都会改变颜色。但对于所有其他行来说都可以。所以，我想要所有的td，但第一个保存日期的td除外。这就是为什么我使用了div，但它不起作用。有一个jQuery标记，因此这是一个合理的假设。我如何为复选框设置不同的值取决于我的复选框是选中还是未选中？我添加了一个编辑，您只需在

if else

的右侧部分设置所需的值，如果选中复选框后发布表单，则该值将为true，如果未选中，则该值将为false或根本不发送。如果您必须定义其他值，则复选框可能不是您尝试执行的操作的正确输入。有一个jQuery标记，因此这是一个合理的假设。如何为复选框设置不同的值取决于我的复选框是否选中？我添加了一个编辑，您只需在

if else

的右侧部分设置所需的值，但是，如果您在选中复选框时发布表单，则该值将为真（如果不是）

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