Html 单击复选框有时会切换其他复选框

所以我得到了5个复选框。所有这些都在彼此之下。它们是使用

svg

和

polyline

制作的。当我点击每个复选框的标签时，它会切换到正确的复选框，但当我点击复选框的图像时，有时它会切换到错误的复选框

.cbx {
  margin: auto;
  margin-top: 2px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098A9;
  transition: all 0.2s ease;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506EEC;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx span:last-child {
  padding-left: 8px;
}
.cbx:hover span:first-child {
  border-color: #506EEC;
}

.inp-cbx:checked + .cbx span:first-child {
  background: #506EEC;
  border-color: #506EEC;
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

html

<div class="ax-cb-div">
  <input class="inp-cbx" id="1" type="checkbox" style="display: none;"/>
  <label for="1" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 1</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="2" type="checkbox" style="display: none;"/>
  <label for="2" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 2</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="3" type="checkbox" style="display: none;"/>
  <label for="3" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 3</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="4" type="checkbox" style="display: none;"/>
  <label for="4" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 4</span>
  </label>
</div>

复选框编号1
复选框2
复选框编号3
复选框编号4

选中复选框1、2、3、4。然后单击复选框3取消选中。复选框4被取消选中。再次单击复选框3时，将取消选中该复选框

---

链接到

您可以使用值标签

<input id="1" value="test" ../>
<input id="3" value="test" ../>

---

您可以使用值标记

<input id="1" value="test" ../>
<input id="3" value="test" ../>

因为选中“变换：缩放”（3.5）可扩展其大小并覆盖其他复选框，这就是原因

.cbx{
保证金：自动；
边缘顶部：2倍；
-webkit用户选择：无；
用户选择：无；
光标：指针；
}
.cbx跨度{
显示：内联块；
垂直对齐：中间对齐；
变换：translate3d（0,0,0）；
}
.cbx span：第一个孩子{
位置：相对位置；
宽度：18px；
高度：18px；
边界半径：3px；
变换：比例（1）；
垂直对齐：中间对齐；
边框：1px实心#9098A9；
过渡：所有0.2秒缓解；
}
.cbx span：第一个子svg{
位置：绝对位置；
顶部：3px；
左：2px；
填充：无；
冲程：#FFFFFF；
笔画宽度：2；
笔划线头：圆形；
笔划线条连接：圆形；
笔划阵列：16px；
行程偏移：16px；
过渡：所有0.3秒缓解；
过渡延迟：0.1s；
变换：translate3d（0,0,0）；
}
.cbx span:第一个孩子：之前{
内容：“；
宽度：100%；
身高：100%；
背景：#506EEC；
显示：块；
变换：比例（0）；
不透明度：1；
边界半径：50%；
}
.cbx span：最后一个孩子{
左侧填充：8px；
}
.cbx:悬停范围：第一个孩子{
边框颜色：#506EEC；
}
.inp cbx:选中+.cbx span:第一个孩子{
背景：#506EEC；
边框颜色：#506EEC；
动画：波动0.4s；
}
.inp cbx:选中+.cbx span:第一个子svg{
笔划偏移：0；
}
.inp cbx:选中+.cbx范围：第一个孩子：之前{
变换：比例（1）；
不透明度：0；
过渡期：所有0.6秒缓解；
}
@关键帧波浪{
50% {
变换：比例（0.9）；
}
}

复选框编号1
复选框2
复选框编号3
复选框编号4

因为选中“变换：缩放”（3.5）可扩展其大小并覆盖其他复选框，这就是原因

.cbx{
保证金：自动；
边缘顶部：2倍；
-webkit用户选择：无；
用户选择：无；
光标：指针；
}
.cbx跨度{
显示：内联块；
垂直对齐：中间对齐；
变换：translate3d（0,0,0）；
}
.cbx span：第一个孩子{
位置：相对位置；
宽度：18px；
高度：18px；
边界半径：3px；
变换：比例（1）；
垂直对齐：中间对齐；
边框：1px实心#9098A9；
过渡：所有0.2秒缓解；
}
.cbx span：第一个子svg{
位置：绝对位置；
顶部：3px；
左：2px；
填充：无；
冲程：#FFFFFF；
笔画宽度：2；
笔划线头：圆形；
笔划线条连接：圆形；
笔划阵列：16px；
行程偏移：16px；
过渡：所有0.3秒缓解；
过渡延迟：0.1s；
变换：translate3d（0,0,0）；
}
.cbx span:第一个孩子：之前{
内容：“；
宽度：100%；
身高：100%；
背景：#506EEC；
显示：块；
变换：比例（0）；
不透明度：1；
边界半径：50%；
}
.cbx span：最后一个孩子{
左侧填充：8px；
}
.cbx:悬停范围：第一个孩子{
边框颜色：#506EEC；
}
.inp cbx:选中+.cbx span:第一个孩子{
背景：#506EEC；
边框颜色：#506EEC；
动画：波动0.4s；
}
.inp cbx:选中+.cbx span:第一个子svg{
笔划偏移：0；
}
.inp cbx:选中+.cbx范围：第一个孩子：之前{
变换：比例（1）；
不透明度：0；
过渡期：所有0.6秒缓解；
}
@关键帧波浪{
50% {
变换：比例（0.9）；
}
}

复选框编号1
复选框2
复选框编号3
复选框编号4

将变换属性值更改为1.5

.inp-cbx:checked + .cbx span:first-child:before {
   transform: scale(1.5);
   opacity: 0;
   transition: all 0.6s ease;
}

---

将“变换”特性值更改为1.5

.inp-cbx:checked + .cbx span:first-child:before {
   transform: scale(1.5);
   opacity: 0;
   transition: all 0.6s ease;
}

---

将指针事件none添加到范围似乎是一个可行的解决方案

.cbx span {
  pointer-events: none;
}

---

将指针事件none添加到范围似乎是一个可行的解决方案

.cbx span {
  pointer-events: none;
}

---

添加

指针事件：无

到

.cbx span:第一个孩子：在

样式之前。是动画造成了问题

在

.cbx span:first child:before

中，我们正在缩放

内容：“

分别从

scale（0）

和

opacity:1

到

scale（3.5）

和

opacity:0

。所以实际上我们只是用不透明来隐藏那个物体，这意味着物体会在那个里并且可以点击。这就是为什么我们需要将

指针事件：none

添加到

.cbx span:first child:before

样式

要测试它，只需选中第四个复选框并使用

样式检查它。inp cbx:checked+.cbx span:first child:before

样式。将不透明度从0更改为

不透明度：1

。您将看到下面这样的内容。

在上图中，您可以看到第四个复选框的

span:before

覆盖了第三个复选框。而且它是可点击的。这就是为什么当你点击第三个复选框时，它实际上会点击第四个复选框

请参阅下面的代码片段

.cbx{
保证金：自动；
边缘顶部：2倍；
-webkit用户选择：无；
用户选择：无；
光标：指针；
}
.cbx跨度{
显示：内联块；
垂直对齐：中间对齐；
变换：translate3d（0,0,0）；
}
.cbx span：第一个孩子{
位置：相对位置；
宽度：18px；
高度：18px；
边界半径：3px；
变换：比例（1）；
垂直对齐：中间对齐；
边框：1px实心#9098A9；
过渡：所有0.2秒缓解；
}
.cbx span：第一个子svg{
职位：绝对