Change table cell style if checkbox is checked

Question

I have a table and I want each cell to have a red background if the cell is disabled, and blue if is enabled. So I have a inserted an invisible checkbox in each cell. When I have labels instead of a table, it works ok (see example here), but it´s not working with a table.

HTML:

  <table id="hours">
    <tbody>
      <tr>
        <td id="tdh00"><input type="checkbox" id="h00"></td>
        <td id="tdh01"><input type="checkbox" id="h01"></td>
      </tr>
    </tbody>
  </table>

CSS:

input[type=checkbox] { visibility: hidden; }
#hours input[type=checkbox]:checked  + #tdh00 { background-color: #265BFA; }
#hours input[type=checkbox]:not(:checked) + #tdh00 { background-color: #FA2421; }

Answer 1

Try like below this is the solution with JQuery :

Fiddle : http://jsfiddle.net/RYh7U/138/

HTML :

<table id="hours" border="1">
 <tbody>
    <tr><td id="tdh00"><input type="checkbox" id="h00"></td><td id="tdh01"><input type="checkbox" id="h01"></td></tr>
    </tbody>
</table>
</body>

CSS :

input[type=checkbox] { visibility: hidden; }

JQuery :

$("#hours td").each(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});

$("#hours td").click(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});

Answer 2

With your markup as it stands, this is not going to work. You are using the + (sibling) selector, but your table cells are not siblings of your checkboxes. In the example you gave, the markup is:

<div class="slideOne">  
    <input type="checkbox" value="None" id="slideOne" name="check" />
    <label for="slideOne"></label>
</div>

Yours is:

<td id="tdh00"><input type="checkbox" id="h00"></td>

So, you are attempting to style the parent based on the state of one its child elements, which is not currently possible with CSS alone.

EDIT

Check out this working example. That fiddle adds the label back in (which will help with accessibility), and positions it in such a way that it visually does what you're after. The markup needs to be:

<table id="hours">
    <tbody>
      <tr>
        <td id="tdh00">
            <div>
                <input type="checkbox" id="h00">
                <label for="h00">Label</label>
            </div>
        </td>
        <td id="tdh01">
             <div>
                <input type="checkbox" id="h01">
                <label for="h01">Label</label>
              </div>
        </td>
      </tr>
    </tbody>
  </table>

And the CSS:

table {
    width: 450px;
    margin: 0 auto;    
}
td {
    border: 1px solid #333;
    padding: 0;
}

td > div { position: relative; }

input[type=checkbox] { visibility: hidden; }

label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    text-indent: -999em;
}

input[type=checkbox]:checked  + label { background-color: #265BFA; }

The extra div in each table cell is necessary, because Firefox can't handle positioning things relative to td elements.

Browser support is good, but only IE9+ is supported because we're using the :checked pseudo-class. You'll get better support with a JavaScript-based solution, but I'd argue that this is a great candidate for progressive enhancement.

EDIT 2

If support for old IE is a requirement, then you'll need to resort to JavaScript. Here's an example using jQuery.

The JavaScript just adds a class of active to the table cell: the bulk of the work is still done with CSS.

$("#hours input").on('change', function(){
    var checkbox = $(this),
        tableCell = checkbox.parents('td');

    checkbox.is(':checked') ?
        tableCell.removeClass('active') :
        tableCell.addClass('active');
}).change();

The HTML remains the same, and the CSS differs only slightly with these lines replacing the :checked pseudo-class:

td { background-color: #265BFA; }
.active { background-color: red; }