1

我正在尝试创建一个复选框标签，其中复选框本身被隐藏但标签没有因此单击标签，检查复选框，即使未显示。

我想要发生的是，当它被选中时，标签保持红色，为此我为复选框活动分配了一个类，但它不起作用。它在悬停时工作正常，只是在不活动时工作。当我单击它时，复选框会选中，但标签不会读取活动类。

有任何想法吗？

我使用以下html：

<div class="gl_delete">
    <div class="deleteCB">
        <input id="uImgId47" type="checkbox" name="uImgId[]" value="47"></input>
        <input type="hidden" name="filename[]" value="6_246f0548d62b9b9cc19210389ef09472.jpg"></input>
        <label onclick="$('#delHolder').show()" for="uImgId47"> X </label>
    </div>
</div>

和下面的CSS

.deleteCB {
width: 20px;    
margin: 20px auto;
}

.deleteCB label, .deleteCB label:after {
cursor: pointer;
position: absolute;
font-weight:bold;
font-size:14px;
content: 'x';
line-height:14px;
position: absolute;
border-radius:6px;
padding-left:9px;
padding-top:3px;
color:#fff;
width: 17px;
height: 21px;
background: #ccc;
border:1px solid #ccc;
top: -1px;
right: -1px;
padding-bottom:0;
}

.deleteCB label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color:#fff;
background: #cc3333;
border:1px solid #cc3333;
}

.deleteCB label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=100);
opacity: 1;
}

.deleteCB input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* hide checkbox */
input[type=checkbox] {
visibility: hidden;
}
4

2 回答 2

3

选择器.deleteCB input[type=checkbox]:checked + label:after使用相邻的兄弟选择器+，这意味着它直接在input[type=checkbox]:checked元素之后选择标签

这不起作用，因为input复选框和标签元素之间还有另一个元素 - 所以您的选择器实际上是：

.deleteCB input[type=checkbox]:checked + input[type=hidden] + label:after

相反，您也可以使用通用兄弟组合器来选择出现在之后的所有元素：

.deleteCB input[type=checkbox]:checked ~ label:after

以下是有关兄弟选择器的更多信息：CSS 技巧：子选择器和兄弟选择器

于 2013-05-15T13:00:56.987 回答
0

如果我的理解正确，我只是建议通过 JavaScript 向您的标签添加一个类，而不是仅仅依赖 CSS。您的标签上已经有一个onclick处理程序，所以我建议创建一个函数在单击它时调用，它处理show()您已经拥有的方法，并为您的标签添加一个类。

例如，HTML：

<label id="labelImgId47" onclick="onLabelClick()" for="uImgId47">...</label>

...和 ​​JavaScript：

function onLabelClick() {
    $('#delHolder').show();
    $('#labelImgId47').addClass('active');
}

如果用户可以打开/关闭复选框，您可以添加条件逻辑来检查其是否选中，并removeClass()在需要将框显示为未选中时使用 jQuery 函数。

然后在您的 CSS 中，您可以使用active类设置标签的样式：

.deleteCB label.active {
    // Your styles here
}
于 2013-05-15T12:56:04.300 回答