我有麻烦处理多个复选框，我不知道什么是错的

我试图做出多个复选框，但我一直有这个问题。每当我有麻烦处理多个复选框，我不知道什么是错的

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

这里是我的代码。

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>

来源

2017-05-28 James David Deann

**但是当我点击第二个或第三个复选框时，只有第一个复选框被选中**。为此提供一个jsfiddle。 –

使用单独的id作为三个输入。在您的代码中，第三个输入使用相同的id。另外，您还使用最后一个标签的for属性中的第一个输入的id。设置for标签的属性作为相关输入ID

.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; 
 
}


 
<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="squaredThree1"></label> 
 
</div> 
 
</div> 
 

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

来源

2017-05-28 06:59:37 XYZ

OH非常感谢你帮助我！它现在工作得很好！ –

因为你的标签都有一个复选框的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>

来源

2017-05-28 07:00:14

OH非常感谢你帮助我！ –

上面的HTML代码有一些问题，如：

。您对同一个元素使用相同的ID's。

。当存在多个具有相同名称的复选框时，名称必须是一个数组来保存多个值，如check[]。

。您的标签仅有第一个复选框的for属性。

来源

2017-05-28 07:01:12

OH非常感谢你帮助我！ –

我有麻烦处理多个复选框，我不知道什么是错的

回答

相关问题