0

我试图在单独的 td 中对标签 + 复选框进行换行。

在我的示例代码中,我创建了 2 个表:
当复选框 = 选中时,当前只有表 1 正在执行直通。我想这是可行的,因为这两个元素共享一个 td。有没有办法解决这个问题,所以表 2 可以直接通过而不是表 1?谢谢!

HTML:

<table id = "1">
    <tr>
        <td>
            <input id="oregano"  type="checkbox" class="checkedBox" />  
            <label for="oregano" class="checkedLabel">Oregano</label>  
        </td>
    </tr>
</table>

<table id = "2">
    <tr>
        <td><input id="oregano"  type="checkbox" class="checkedBox" /></td>        
        <td><label for="oregano" class="checkedLabel">Oregano</label></td>
    </tr>
</table>

样式表:

.checkedBox:checked + .checkedLabel {
        text-decoration: line-through;
        color: blue
        }

小提琴
http://jsfiddle.net/gdmpz506/

4

2 回答 2

1

那是因为每个table.

如果你把checkboxandlabel放在td第二个中table,它会工作得很好。(当然要使id第二个标签不指向第一个元素。

.checkedBox:checked + .checkedLabel {
    text-decoration: line-through;
    color: blue;
}
<table>
    <tr>
        <td>
            <input id="oregano-1" type="checkbox" class="checkedBox" />
            <label for="oregano-1" class="checkedLabel">Oregano</label>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td id="checktd">
            <input id="oregano-2" type="checkbox" class="checkedBox" />
            <label for="oregano-2" class="checkedLabel">Oregano 2</label>
        </td>
    </tr>
</table>

演示在http://jsfiddle.net/gaby/gdmpz506/1/

于 2014-11-23T20:48:34.077 回答
0

它在表 1 中有效,因为inputlabel元素是同级元素,即同一元素的子元素。父元素恰好是一个td元素是无关紧要的。您正确使用了“下一个兄弟”运算符+。(在这里我假设你真的想要标签被删除。)

inputandlabel元素不是同级时,这是不可能的,因为如果它们在不同的td元素中,它们就不可能。目前没有 CSS 选择器来处理这种情况。您将需要 JavaScript 来检查复选框以删除相应的标签。

于 2014-11-23T21:12:02.290 回答