我有麻煩處理多個複選框，我不知道什麼是錯的

我試圖做出多個複選框，但我一直有這個問題。每當我有麻煩處理多個複選框，我不知道什麼是錯的

我做了三個複選框，但是當我點擊第二個或第三個複選框，只有第一個複選框被選中，我不斷變化並檢查我的代碼一個小時，但我不知道什麼是問題:(:(

這裏是我的代碼。

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非常感謝你幫助我！ –

我有麻煩處理多個複選框，我不知道什麼是錯的

回答

相關問題