如果选中复选框，则更改表格单元格样式

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

试试下面这个是 JQuery 的解决方案：

小提琴： 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

就目前的标记而言，这是行不通的。您正在使用+（兄弟）选择器，但您的表格单元格不是复选框的兄弟。在您给出的示例中，标记为：

<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 是不可能的。

编辑

查看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 的解决方案可以获得更好的支持，但我认为这是渐进增强的绝佳候选者。

编辑 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; }