Изменить стиль ячейки таблицы, если флажок установлен

Question

У меня есть таблица, и я хочу, чтобы каждая ячейка имела красный фон, если ячейка отключена, а синяя, если включена. Поэтому я вставил невидимый флажок в каждую ячейку. Когда у меня есть метки вместо таблицы, он работает нормально (см. Здесь example), но он не работает со столом.

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

С разметке, как он стоит, это не будет работать. Вы используете селектор + (sibling), но ваши ячейки таблицы не являются братьями и сестрами ваших флажков. В этом примере вы дали, разметка:

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

Твое:

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

Таким образом, вы пытаетесь стиль родителя на основе состояния одного из его дочерних элементов, который не является в настоящее время возможно только с помощью CSS.

EDIT

Заканчивать this working example. Эта скрипка добавляет обратно label (что поможет с доступностью) и позиционирует его таким образом, чтобы визуально делать то, что вам нужно. Разметка должна быть:

<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> 

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

в каждой ячейке таблицы дополнительные div необходимы, потому что Firefox не может обрабатывать позиционирование вещи относительно td элементов.

Поддержка браузера хорошая, но поддерживается только IE9 +, потому что мы используем псевдокласс класса :checked. Вы получите лучшую поддержку с помощью JavaScript-решения, но я бы сказал, что это отличный кандидат для прогрессивного улучшения.

EDIT 2

Если поддержка старых IE является обязательным требованием, то вам необходимо обратиться к JavaScript. Here's an example используя jQuery.

JavaScript просто добавляет класс ячейки active в таблицу: основная часть работы по-прежнему выполняется с помощью CSS.

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

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

HTML, остается тем же самым, и CSS лишь немного отличается эти строки замены :checked псевдо-класс:

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

Answer 2

Попробуйте, как показано ниже, это решение с 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"); 
    } 
});