javascript - 我无法处理多个复选框，我不知道出了什么问题

Question

我试图制作多个复选框，但我一直遇到这个问题。每当

我做了三个复选框，但是当我点击第二个或第三个复选框时，只有第一个复选框被选中，我一直在更改和检查我的代码一个小时，但我不知道是什么问题:( : (

这是我的代码。

CSS

.squaredThree {
    width: 20px;    
    margin: 20px auto;
    position: relative;
}

.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 3px solid #fcfff4;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
}

.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

#one input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

#two input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}


#three input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

HTML

<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>

Answer 1

因为您的标签具有第一个复选框的 for 属性。因此，您必须为输入使用唯一 ID，并将标签的 for 属性设置为相关输入。

你可以使用这个:

<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>