如果选中复选框，如何更改 div 的颜色? [英] How to change color of my div if check-box is checked?

问题描述

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

 <tr><td>#DateMeeting#</td></tr><cfoutput><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{背景颜色:红色；}

这是我更新的工作代码.问题一是在我的代码的 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");});.红色的{背景颜色:红色；}<cfoutput query="qryTest" group="DateMeeting"><tr><td>#DateMeeting#</td><cfoutput><div class="blockRow"><td>#StartTime#</td><td>#EndTime#</td><td><input type="checkbox" name="block" id="block"></td>

</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("红色");//复选框被选中，做一些事情}别的{div.removeClass("红色");//checkbox没有被选中，做别的事情}});

I have table that is created based on records from data base. Inside of tbody I have tr that creates each table row. Table row has multiple time slots for same date. I want to change background color of my time block if check box is checked. I got my check box to work, I did test with alert and some text inside. Now I'm trying to change the background color but nothing works in this case that I tried so far. Here is my code:

 <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 script:

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

and my css:

.red{
   background-color:red; 
}

This is working code that I updated. Problem number one was in html structure of my code. Second If I used document.getElementById('') I was getting only first row chnaged background-color, no matter which row I click on. So I have had to use getElementByClassName. Anyway I decided to use JQuery addClass/removeClass. Thanks everyone for help with this problem.

解决方案

Try this:

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

This gets the closest blockrow to the current checkbox so should work with more than one instance. Since you can't have 2 elements with the same id I have change blockrow to the class.

If you want to do other things based on the same condition then you can do this:

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

这篇关于如果选中复选框，如何更改 div 的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！