CSS: Checked - Change <Td> Background

How to add a background color to the td element when you check the checkbox in it

My suggestion is as below, with explanatory comments in the code of that demonstration:

let carParkCheckMain = document.querySelector('.car-park-check-main'),
  carParkChecks = document.querySelectorAll('.car-park-check'),
  tdAll = document.querySelectorAll('.access-td'),
  allCheckboxes = document.querySelectorAll('table input[type=checkbox]');

// defining a function - cellHighlight() - using an Arrow function
// expression; this function takes two arguments:
// el: Node, the node from which to navigate to the closest
//     ancestor <td> element, and
// state: an expression/assessment which will be evaluated to
//        a true/truthy/false/falsey value to determine the
//        highlighted/unhighlighted state of the <td>:
const cellHighlight = (el, state) => {
  // we use Element.closest() to navigate to the
  // closest ancestor element matching the selector; if
  // the 'el' node matches that selector then the 'el' node
  // will be returned from closest; if there is no matching
  // ancestor then this will return null:
  el.closest('td')
    // we then use Element.classList API to update the classList:
    .classList
    // we use the toggle() method to apply, or remove, the
    // 'td-active' class based on the state being truthy/true
    // (it will be added) or falsey/false (the class would be
    // removed):
    .toggle('td-active', state)
};

// binding the anonymous (Arrow) function of the EventTarget.addEventListener()
// method as the event-handler for the 'change' event, and passing in the
// Event Object ('e'):
carParkCheckMain.addEventListener('change', (e) => {
  // caching a reference to the main checkbox, though as
  // we only call it once this isn't really necessary in
  // this demo:
  const main = e.currentTarget,
    // retrieving the checked/unchecked state of the
    // main checkbox for later use:
    currentState = main.checked;
  // using NodeList.prototype.forEach() to iterate over all
  // elements retrieved in the carParkChecks NodeList, and
  // passing the current element-node into the Arrow function:
  carParkChecks.forEach(
    (checkbox) => {
      // updating the enabled/disabled state to the inverse
      // of the checked/unchecked state of the main checkbox;
      // if the main checkbox is checked (main.checked === true)
      // we want to enable the checkbox.disabled state by
      // setting checkbox.disabled = false (inverse of true),
      // and vice-versa:
      checkbox.disabled = !currentState;

      // calling the cellHighlight() function, passing in the current
      // Node and the assessment by which that Node should highlighted
      // or not:
      cellHighlight(checkbox, checkbox.disabled === false && checkbox.checked)
    });
});

// again using NodeList.prototype.forEach(), and Arrow functions,
// to first bind the anonymous event-handling function to the
// 'change' event of each Node in the NodeList.
// I wasn't sure if all checkbox <td> cells - inclusing the 'main'
// checkbox - should have the 'td-active' class, if so then the
// 'carParkChecks' can be replaced with the 'allCheckboxes' NodeList:
carParkChecks.forEach(
  (checkbox) => checkbox.addEventListener('change', (e) => {
    // and then again using the cellHighlight() function
    // to toggle the highlight of the cell as appropriate:
    cellHighlight(e.target, checkbox.checked)
  })
);

.td-active {
  background-color: rgb(95 241 95);
}

<table class="table table-bordered access-table">
  <tbody>
    <tr>
      <th scope="row">Checkboxes</th>
      <td class="main-td access-td one">
        <label>
          <input type="checkbox" class="access-table-input car-park-check-main"> main checkbox
        </label>
      </td>
      <td class="base-td access-td two">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td four">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td five">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
      <td class="base-td access-td six">
        <label>
          <input type="checkbox" class="access-table-input car-park-check" disabled> secondary checkbox
        </label>
      </td>
    </tr>
  </tbody>
</table>

Change td color on checkbox checked

JS Fiddle: http://jsfiddle.net/satpalsingh/KPXrU/

HTML:

<table>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>   
 </table>

JS:

$(function(){
    $( "input[type=checkbox]" ).on("change", function(){
        if($(this).is(':checked'))
            $(this).parent().css('background-color', '#cd0000');
        else
            $(this).parent().css('background-color', '');
    });
});

Changing background-color of td on checked

You should just add a col tags to your HTML table. You can then set the background-color of the col and will make all the TDs in the column that color:

function ChangeColColor(chkCol,col) {   var varCol = document.getElementById(col);   var varColor = "White";   if (chkCol.checked == true) {       varColor = "Red";   }   varCol.style.backgroundColor = varColor;}

<table>  <colgroup>    <col id="colA">      <col id="colB">        <col id="colC">  </colgroup>  <tr>    <td>Column A <input id="chkColA" type="checkbox" onclick="ChangeColColor(this,'colA')"/></td>    <td>Column B <input id="chkColB" type="checkbox" onclick="ChangeColColor(this,'colB')"/></td>    <td>Column C <input id="chkColC" type="checkbox" onclick="ChangeColColor(this,'colC')"/></td>  </tr>  <tr>    <td>Data A:1</td>    <td>Data B:1</td>    <td>Data C:1</td>  </tr>  <tr>    <td>Data A:2</td>    <td>Data B:2</td>    <td>Data C:2</td>  </tr>  <tr>    <td>Data A:3</td>    <td>Data B:3</td>    <td>Data C:3</td>  </tr></table>

CSS :checked - change td background

Not currently, no. This functionality is being specced (see :has()), but it won't actually be available for public use for quite some time.

 /* Only matches TRs that contain checked INPUTs */
 tr:has(input:checked) {
  background:red;
 }

Note: The example provided is valid according to the current Editor's Draft, but the syntax may change or the functionality may be removed entirely before browser vendors even begin implementing it.

Trying to change td background color based on checkbox value on Razor page

Try to use EditFor to replace DisplayFor,and then add the following js to your view:

function changeColor(t) {
            if (t.checked) {
                $(t).parent().css('background', 'red');
            } else {
                $(t).parent().css('background', 'none');
            }
            
        }
        $('input[type=checkbox]').change(function () {
            changeColor(this);
        })
$(function () {
            $('input[type=checkbox]').each(function () {
                changeColor(this);
            });
           
        })

Change td Background Color After Validation

You can create an array of string with all the invalid fields name property and then it will take care to set the background color for those fields:

function ValidateForm(invalidFields){$("td input").each(function(){  if($.inArray(this.name,invalidFields) >= 0){    $(this).parent().css("background-color","rgba(244, 67, 54, 0.33)");    }  });};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tr>    <td>      <input type="checkbox" name="purchase_mode" value="DIRECT" />Direct    </td>    <td>      <input type="checkbox" name="description" value="SUPPLY" />SUPPLY    </td>  </tr>  <tr>      <td><input type="button" onclick="ValidateForm(['purchase_mode'])" value="Validate Form"></td>  </tr></table>

Active checkbox changes table background color except for a cell

Add the following code to your CSS:

#checkbox_id:checked+table #red {
  background-color: red;
}

Here is a code snippet:

label {  -webkit-appearance: button;  -moz-appearance: button;  appearance: button;  display: inline-block;  cursor: pointer;  margin: 5px;}
#checkbox_id:checked+table {  background-color: yellow;}
#checkbox_id:checked+table #red {  background-color: red;}

/*Table styles*/
.tg {  border-collapse: collapse;  border-spacing: 0;}
.tg td {  border-color: black;  border-style: solid;  border-width: 1px;  font-family: Arial, sans-serif;  font-size: 14px;  overflow: hidden;  padding: 10px 5px;  word-break: normal;  width: 50px;  height: 50px;}
.tg th {  border-color: black;  border-style: solid;  border-width: 1px;  font-family: Arial, sans-serif;  font-size: 14px;  font-weight: normal;  overflow: hidden;  padding: 10px 5px;  word-break: normal;  width: 50px;  height: 50px;}
.tg .tg-0lax {  text-align: left;  vertical-align: top}

<!DOCTYPE html><html lang="it" dir="ltr">
<head>  <meta charset="utf-8">  <title>Check6</title></head>
<body>  <label for="checkbox_id">CLICCA</label>  <input type="checkbox" id="checkbox_id">  <table class="tg">    <thead>      <tr>        <th class="tg-0lax"></th>        <th class="tg-0lax"></th>        <th class="tg-0lax"></th>      </tr>    </thead>    <tbody>      <tr>        <td class="tg-0lax"></td>        <td id="red"></td>        <td class="tg-0lax"></td>      </tr>      <tr>        <td class="tg-0lax"></td>        <td class="tg-0lax"></td>        <td class="tg-0lax"></td>      </tr>    </tbody>  </table></body>
</html>