複数のチェックボックスに問題があります。何が間違っているのか分かりません。

Question

複数のチェックボックスを作ろうとしていますが、この問題が発生しています。 いつでも

私は3つのチェックボックスを作ったが、2番目または3番目のチェックボックスをクリックすると、最初のチェックボックスのみが選択され、1時間は変更され、コードがチェックされているが、 :(:(ここ

は私のコードです。

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

3つの入力に別々のidを使用します。コードでは、最後のラベルのfor属性の最初の入力のIDを使用しています。また、3番目の入力に同じ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>

Answer 2

としてラベルの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> 

Answer 3

上記のhtmlコードは次のように、いくつかの問題を持っています。複数の要素に同じID'sを使用しています。

。同じ名前を持つ複数のチェックボックスがある場合、名前はcheck[]のような複数の値を保持する配列でなければなりません。

。あなたのラベルには最初のチェックボックスの属性がforしかありません。