Question

我试图使这个CSS变得灵活并在HTML表格中使用，并且只能在不使用JavaScript的情况下更改焦点元素 - 但由于选择器，它只是更改第一个元素。我不是最好的CSS开发者。

我理解使用"for="并重复id的复选框，我们会渲染无效的HTML，但我想知道是否有办法绕过它。我尝试为每个父span提供一个唯一的id，并为它们生成单独的类以及标签。但这似乎可能是一项不必要的工作量。

以前我没有把这些包含在表格中，除非我现在这样做。

是否有一种简单/灵活的方法可以实现这一目标？

请参阅我的示例here。

CSS

.checkbox-on-off {
  position: relative;
  display: inline-block;
  width: 35px;
  padding-right: 2px;
  overflow: hidden;
  vertical-align: middle;
    margin-top: 10px;
}

.checkbox-on-off input[type=checkbox] {
  position: absolute;
  opacity: 0;
}


.checkbox-on-off input[type=checkbox]:checked+label {
  background-color: lightblue;
}

.checkbox-on-off label {
  display: inline-block;
  border: 1px solid transparent;
  height: 15px;
  width: 100%;
  background: #b8b8b8;
  cursor: pointer;
  border-radius: 20px;
}

.checkbox-on-off input[type=checkbox]:checked+label .checked {
  display: inline-block;
  margin-top: 3px;
  margin-left: 6px;
  background: no-repeat url('img/www-hitchhiker-vflAhaHWR.png') -421px -78px;
  background-size: auto;
  width: 10px;
  height: 10px;
}

.checkbox-on-off label .checked {
  display: none;
}

.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
  display: none;
}

.checkbox-on-off label .unchecked {
  display: inline-block;
  float: right;
  padding-right: 3px;
}

.checkbox-on-off input[type=checkbox]:checked+label .toggle {
  float: right;
}

.checkbox-on-off label .toggle {
  float: left;
  background: #fbfbfb;
  height: 15px;
  width: 13px;
  border-radius: 20px;
}

HTML

<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>

<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>

<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>
<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>
<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>
<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>

Answer 1

是的，绕过它的方法是在label元素中输入：

<label>
 <input type="checkbox">
 Some Checkbox 1
</label>

<label>
 <input type="checkbox">
 Some Checkbox 2
</label>

因此，点击label内的任何位置都会切换同样嵌套在label内的复选框。现在，您不需要for=上的label属性。

多个标签切换复选框

CSS

HTML

1 个答案: