Question

我想使用图像创建自定义复选框。我知道该怎么做，这个网站上有很多不错的选择。但是我的首要目标是学习，所以我想问这个问题。当我使用display隐藏带有CSS的HTML复选框时：none; 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");
});

jsfiddle

P.s。一个小问题如您所见，该小提琴使用的是旧版jQuery。当我链接到较新的版本时，整个操作不再起作用。有人也可以详细说明吗？

谢谢。

Answer 1

使用不透明度：0;而不是显示：无；该复选框仍将存在，您可以单击它但看不到

Answer 2

复选框中的id属性错误，因此单击标签不会调用复选框中的更改。

只需尝试在输入（复选框）中将标签中的“ for”属性与“ id”属性进行匹配。

 $("#togglecontainer").delegate("input[type=checkbox]", "change", function () {
        $(this).nextAll().toggleClass("complete");
    });

.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] {

}

.complete { 
font-weight: bold;
}

input[type=text] {
background-color:transparent;
border: 0px solid;
margin-left: 20px;
color:#222222;
font-style:oblique;
font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglecontainer">
<input type="checkbox" id="checkbox" class="item" style="display: none"/>
<label for="checkbox"></label>
<input value="make me bold" type="text" class="inputfield"/>
</div>

Answer 3

您始终可以将复选框包装在标签内，然后不需要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>

隐藏HTML复选框，但在使用自定义图像复选框时保持功能

3 个答案: