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（＆＃39;＆＃39;）我只得到第一行的chnaged background-color，无论我点击哪一行。所以我不得不使用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个具有相同身份的元素，我已经将阻止变为类。

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

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

这里是完整的代码段：

＆＃13;

  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";
      }
    });
  }

＆＃13;

<input type="checkbox" name="block" id="block">
<div id="box">
The box
</div>

＆＃13;

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

当然，您可以缩小输入范围：复选框选择器。如果它不是<td>中的第一个<tr>，那么您最好为其分配一个类并随之获取它。

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

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

3 个答案:

修改