How can I make my div change color when the check-box is selected?

Question

How can I make my div change color when the check-box is selected?

I have a dynamic table in my web application that is populated with data from a database. Each row in the table represents multiple time slots for a specific date. I am working on a feature where the background color of a time block can be changed if a checkbox next to it is checked. While I successfully implemented the functionality of the checkbox, I faced challenges when trying to change the background color dynamically based on its status. Here is an excerpt of 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>

JavaScript:

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

CSS:

.highlight{
   background-color: lightblue; 
}

This solution now works seamlessly after making adjustments to the structure of the HTML and utilizing jQuery for better control over elements. With the help of the community, I was able to overcome initial issues and create a user-friendly experience for modifying the appearance of time blocks. Thank you all for your input!

javascript jquery html css

Answer 1

Answer №1

Check out this solution:

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

View the code on jsfiddle:

https://jsfiddle.net/3s83gj70/2/

This code identifies the closest blockrow to the current checkbox, making it adaptable for multiple instances. It uses classes instead of IDs to avoid conflicts.

If you need to perform different actions based on the checkbox status, you can modify the code like this:

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    if($(this).is(":checked")){
        div.addClass("red");
        // Perform action when checkbox is checked
    }
    else
    {
        div.removeClass("red");
        // Perform action when checkbox is unchecked
    }
});

Answer 2

Check out this solution:

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

View the code on jsfiddle:

https://jsfiddle.net/3s83gj70/2/

This code identifies the closest blockrow to the current checkbox, making it adaptable for multiple instances. It uses classes instead of IDs to avoid conflicts.

If you need to perform different actions based on the checkbox status, you can modify the code like this:

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    if($(this).is(":checked")){
        div.addClass("red");
        // Perform action when checkbox is checked
    }
    else
    {
        div.removeClass("red");
        // Perform action when checkbox is unchecked
    }
});

Answer 3

Answer №2

Simple:

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

UPDATE

If you prefer not to use jQuery library, you can achieve the same result with pure JavaScript like this:

http://jsfiddle.net/bfss81sa/

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

Below is the complete code 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>

Answer 4

Simple:

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

UPDATE

If you prefer not to use jQuery library, you can achieve the same result with pure JavaScript like this:

http://jsfiddle.net/bfss81sa/

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

Below is the complete code 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>

Answer 5

Answer №3

Your HTML code could use some tidying up. Here is a suggestion:

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

You can also specify the scope of the input checkbox selector for better performance. If the <td> is not the first one in your <tr>, consider assigning it a specific class.

Remember, the structure of your DOM is important. Incorrect nesting like <cfoutput> within <tr> or having <td> as a direct child of <div> can impact JavaScript traversal.

Answer 6

Your HTML code could use some tidying up. Here is a suggestion:

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

You can also specify the scope of the input checkbox selector for better performance. If the <td> is not the first one in your <tr>, consider assigning it a specific class.

Remember, the structure of your DOM is important. Incorrect nesting like <cfoutput> within <tr> or having <td> as a direct child of <div> can impact JavaScript traversal.

How can I make my div change color when the check-box is selected?

Answer №1

Answer №2

UPDATE

Answer №3

Similar questions

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

modify the color of a box within a grid upon clicking it

Tips for showcasing a complete background image in a div even if the content inside is minimal

How to download and install Google Chrome Canary on your Android or iPhone device

Why won't hover over function properly in separate divs for two items?

Ways to decrease the space between lines of text within a single mat-option element

Input field with a calendar option? Validating dates using jQuery

Screening through the outgoing html documents

Position a Bootstrap 3 division within a central division for ultimate centering

Socket.io-powered notification system

Steps for opening a clicked link in a new tab:

There was an error due to a TypeError: The 'page' property cannot be read because it is undefined

Failure to retrieve blob - net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

instructions on how to eliminate slideUp using jquery

There is no POST data present in the jquery ajax request

Submitting Data Forms with AJAX on dynamically loaded webpages

What is the best way to add a key to a JavaScript array while keeping it reactive in Vue.js?

The function is limited to a single use

Animating the smooth collapse of panels within listviews

I am experiencing issues with a few of my design choices not functioning correctly