Javascript 我无法处理多个复选框，我没有'；我不知道怎么了

我试图设置多个复选框，但我一直遇到这个问题。 无论何时

我设置了三个复选框，但当我单击第二个或第三个复选框时，只选中了第一个复选框，我持续更改和检查代码一个小时，但我不知道问题出在哪里：（：(

这是我的密码

css

HTML

---

对三个输入使用单独的

id

。在您的代码中，您对第三个输入使用相同的

id

。此外，您对最后一个标签的

属性使用
中第一个输入的id。将标签的
属性设置为相关输入的id


.squaredThree{
宽度：20px；
保证金：20px自动；
位置：相对位置；
}
.三方标签{
光标：指针；
位置：绝对位置；
宽度：20px；
高度：20px；
排名：0；
边界半径：4px；
盒影：嵌入0px 1px rgba（0,0,0,0.5），0px 1px 0px rgba（255255,4）；
背景：-webkit线性梯度（顶部，#222 0%，#45484d 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#222'，endColorstr='#45484d'，GradientType=0）；
}
.平方三个标签：后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：4px；
左：4px；
边框：3px实心#fcfff4；
边界顶部：无；
边界权：无；
-webkit变换：旋转（-45度）；
}
.squaredThree标签：悬停：：后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=30）”；
过滤器：α（不透明度=30）；
不透明度：0.3；
}
#一次输入[类型=复选框]：选中+标签：之后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}
#双输入[类型=复选框]：选中+标签：之后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}
#三输入[类型=复选框]：选中+标签：之后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}
因为您的标签具有第一个复选框的
属性。所以您必须为输入使用唯一id，并将标签的
属性设置为相关输入

您可以使用以下选项：

<div id="one">
    <div class="squaredThree one">
        <input type="checkbox" value="None" id="squaredThree1" name="check" />
        <label for="squaredThree1"></label>
    </div>
</div>

<div id="two">
    <div class="squaredThree">
        <input type="checkbox" value="None" id="squaredThree2" name="check" />
        <label for="squaredThree2"></label>
    </div>
</div>

<div id="three">
    <div class="squaredThree">
        <input type="checkbox" value="None" id="squaredThree3" name="check" />
        <label for="squaredThree3"></label>
    </div>
</div>

上述html代码存在一些问题，例如：



。您对多个元素使用相同的
ID

。如果有多个具有相同名称的复选框，则名称必须是一个数组，以容纳多个值，如
check[]

。您的标签只有第一个复选框的
属性。
但是当我单击第二个或第三个复选框时，只有第一个复选框被选中。为此提供一个JSFIDLE。噢，非常感谢您帮助我！噢，非常感谢您帮助我！它现在运行得非常好！噢，非常感谢您帮助我！！
<div id="one">
<div class="squaredThree one">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>
</div>

<div id="two">
<div class="squaredThree">
    <input type="checkbox" value="None" id="squaredThree1" name="check" />
    <label for="squaredThree"></label>
</div>
</div>

<div id="three">
<div class="squaredThree">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>
</div>

<div id="one">
    <div class="squaredThree one">
        <input type="checkbox" value="None" id="squaredThree1" name="check" />
        <label for="squaredThree1"></label>
    </div>
</div>

<div id="two">
    <div class="squaredThree">
        <input type="checkbox" value="None" id="squaredThree2" name="check" />
        <label for="squaredThree2"></label>
    </div>
</div>

<div id="three">
    <div class="squaredThree">
        <input type="checkbox" value="None" id="squaredThree3" name="check" />
        <label for="squaredThree3"></label>
    </div>
</div>