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 are some effective ways to test asynchronous functions in React?

Slide up the bottom of the page using Jquery

My goal is to retrieve and print the duplicated values only once from an associative array

Upon introducing the CSS loader into the webpack configuration, TinyMCE unexpectedly ceases to function

Altering the width of an unordered list (<ul>) to fit menu items with the help of jQuery

An array containing concatenated values should be transferred to the children of the corresponding value

Encountering a CORS issue specifically on the client side of a Next.js application when interacting with an API gateway

What is the best way to prevent my form from saving empty values to the database?

Add HTML content individually to each item in the array

The process of exporting and utilizing models in Sequelize

Get a collection of images packed into a single zip file

What steps should I take to convert this from a string to HTML format?

Having trouble retrieving data through ajax with django

CSS animations are only functional when the Developer Tools are activated

Image input not working in Internet Explorer

What is causing the text to not wrap around properly?

Executing a Javascript function through Typescript in an Ionic application

There was no popcorn mix-up in your document

What is the best way to incorporate this data into the HTML document?

Redirecting files from the file system to the emulator is not functioning properly