隐藏HTML复选框，但使用自定义图像时保留功能复选框
隐藏HTML复选框，但使用自定义图像时保留功能复选框
提问于 2018-06-21 03:11:29
我想使用图像来创建自定义复选框。我知道如何做到这一点，在这个网站上有很多很好的选择。但我的首要目标是学习，所以我想问这个问题。当我使用display: none隐藏带有CSS的HTML复选框时，jquery代码不再工作。这对我来说是有意义的，但我如何才能使带有图像的自定义复选框也能像原始复选框一样工作？
HTML
<div id="togglecontainer">
<input type="checkbox" id="checkbox'+(counter)+'"class="item"/>
<label for="checkbox"></label>
<input value="make me bold" type="text" class="inputfield"/>
</div>CSS
.inputfield{
padding-left: 20px;
}
label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
position: absolute;
z-index: 100;
}
input[type=checkbox]:checked+label:before {
content:url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
//display: none;
}
.complete {
font-weight: bold;
}
input[type=text] {
background-color:transparent;
border: 0px solid;
margin-left: 20px;
color:#222222;
font-size: 13px;
}jQuery
$("#togglecontainer").delegate("input[type=checkbox]", "change", function () {
$(this).nextAll().toggleClass("complete");
});附注：一个小问题；正如您所看到的，这个小提琴使用的是旧版本的jQuery。当我链接到较新的版本时，整个事情就不再起作用了。有没有人也能详细解释一下？
提前谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-21 05:43:56
您可以始终将复选框包装在标签内，然后不需要id或for。
我的示例没有使用图像。我不需要id或for，如果你点击文本，它也可以工作。
我确实将文本转换为文本，而不再是<input type="text">字段。
我还用普通的JS重写了代码，没有使用jQuery。在你剩下的代码中，这仍然可以和jQuery一起工作，但是没有jQuery，它也可以工作。
var el = document.querySelector("#togglecontainer");
el.addEventListener("change", evt => {
if (evt.target.type === "checkbox") {
evt.target.parentNode.classList.toggle("checked", evt.target.checked);
evt.preventDefault();
}
});.my-checkbox:before {
content: '';
height: 20px;
display: inline-block;
border: 1px solid black;
border-radius: 3px;
vertical-align: middle;
width: 20px;
text-align: center;
}
.my-checkbox.checked {
font-weight: bold;
}
.my-checkbox.checked:before {
content: '✓';
}
.my-checkbox [type=checkbox] {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
display: none;
}<div id="togglecontainer">
<label class="my-checkbox">
<input type="checkbox"/>
make me bold
</label>
</div>
Stack Overflow用户
发布于 2021-09-30 17:11:41
Stack Overflow用户
发布于 2018-06-21 03:37:19
使用opacity:0；而不是display:none；复选框仍然在那里，您可以单击它，但看不到它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50955450
复制相关文章
相似问题