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

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

2 个答案: