CODEWITHSUNDEEP
javascriptjqueryhtmlcss
espresso_coffee
espresso_coffee

Reputation: 6110

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

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.

Upvotes: 1

Views: 7270

Answers (3)

Dhunt
Dhunt

Reputation: 1594

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

Upvotes: 3

Kyobul
Kyobul

Reputation: 777

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.

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Easy:

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

EDIT

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

http://jsfiddle.net/bfss81sa/

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

Here you are the complete 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>

Upvotes: 2

Related Questions