javascript - How to change color of my div if check-box is checked? - Stack Overflow

admin管理员组

文章数量:1402460

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 14, 2015 at 16:42 espresso_coffee asked Dec 14, 2015 at 15:00 espresso_coffeeespresso_coffee 6,1201212 gold badges9595 silver badges220220 bronze badges 7

• Can you post the error you are getting – Veerendra Commented Dec 14, 2015 at 15:01
• $('#blockRow').css("backgroundcolor","red") should be camelCase: $('#blockRow').css("backgroundColor","red") – MoLow Commented Dec 14, 2015 at 15:02
• In your jQuery call for the CSS change, "backgroundcolor" needs to be exactly like in CSS, "background-color". Idk if that is the problem though – m_callens Commented Dec 14, 2015 at 15:02
• I'm not getting any error that's the problem, I can't find what is wrong. If I use alert my code gives me text every time I click on check box. – espresso_coffee Commented Dec 14, 2015 at 15:03
• have you more than one element which ID is #blockRow ? In this case, you should use class – Luis González Commented Dec 14, 2015 at 15:09

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

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

Easy:

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

EDIT

Then you don't include jQuery library. To make pure js make this:

http://jsfiddle/bfss81sa/

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

Here you are the plete snippet:

  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>

Your html code is a mess. Anyway, generally :

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

Of course, you can narrow the scope of input:checkbox selector. If it is not the FIRST <td> in your <tr> then you better assign it a class and get it with it.

NOTE : DOM must be correct <cfoutput> cannot be child of <tr>; <div> cannot have <td> as direct child; Incorrect DOM impact javascript traversing.

本文标签： javascriptHow to change color of my div if checkbox is checkedStack Overflow