원하는 확인란이 활성화되지 않음

Question

두 번째 확인란을 클릭하면 첫 번째 확인란이 활성화됩니다.

하지만 첫 번째 확인란을 클릭하면 모든 것이 정상적으로 작동합니다.

두 번째 확인란을 클릭하고 무슨 일이 일어나는지 확인하십시오.

1000 개의 확인란이 있습니다.변경 ID는 좋지 않습니다!

자세한 내용이 필요하면 질문에 대한 의견을 말하십시오.

.checkboxFour{ 
 
\t width: 14px; 
 
\t height: 14px; 
 
\t background: #dddddd; 
 
\t margin: 0px 0px; 
 
\t border-radius: 100%; 
 
\t position: absolute; 
 
\t margin-top: -20px; 
 
\t margin-right: -18px; 
 
} 
 
.checkboxFour > input{visibility: hidden;/* position: absolute; *//* z-index:-1000; *//* overflow: hidden; *//* clip: rect(0 0 0 0); */height: 17px;width: 14px;margin: -2px;margin-right: -7px;padding:0;border:0;} 
 
.checkboxFour label{ 
 
\t width: 10px; 
 
\t height: 10px; 
 
\t border-radius: 100px; 
 
\t transition: all .5s ease; 
 
\t cursor: pointer; 
 
\t top: 0px; 
 
\t position: absolute; 
 
\t left: 2px; 
 
\t z-index: 1; 
 
\t background: #ddd; 
 
\t margin-top: 2px; 
 
\t margin-right: 2px; 
 
} 
 
.checkboxFour input[type=checkbox]:checked + label { 
 
\t background: #f83232; 
 
}

<br> 
 
<br> 
 
<br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput" name=""><label for="checkboxFourInput"> </label> Important</div></td> 
 
<br><br><br><br><br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput" name=""><label for="checkboxFourInput"> </label> </div>Not Important</td>

감사합니다 :

은 여기 봐주십시오 코드입니다!

Answer 1

당신이 입력에 동일한 ID-S를 넣어 가지고 있기 때문에이 발생, 모두 라벨이 해당 ID를 참조했다 :

.checkboxFour{ 
 
\t width: 14px; 
 
\t height: 14px; 
 
\t background: #dddddd; 
 
\t margin: 0px 0px; 
 
\t border-radius: 100%; 
 
\t position: absolute; 
 
\t margin-top: -20px; 
 
\t margin-right: -18px; 
 
} 
 
.checkboxFour > input{visibility: hidden;/* position: absolute; *//* z-index:-1000; *//* overflow: hidden; *//* clip: rect(0 0 0 0); */height: 17px;width: 14px;margin: -2px;margin-right: -7px;padding:0;border:0;} 
 
.checkboxFour label{ 
 
\t width: 10px; 
 
\t height: 10px; 
 
\t border-radius: 100px; 
 
\t transition: all .5s ease; 
 
\t cursor: pointer; 
 
\t top: 0px; 
 
\t position: absolute; 
 
\t left: 2px; 
 
\t z-index: 1; 
 
\t background: #ddd; 
 
\t margin-top: 2px; 
 
\t margin-right: 2px; 
 
} 
 
.checkboxFour input[type=checkbox]:checked + label { 
 
\t background: #f83232; 
 
}

<br> 
 
<br> 
 
<br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput" name=""><label for="checkboxFourInput"> </label> Important</div></td> 
 
<br><br><br><br><br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput2" name=""><label for="checkboxFourInput2"> </label> </div>Not Important</td>

Answer 2

.checkboxFour{ 
 
\t width: 14px; 
 
\t height: 14px; 
 
\t background: #dddddd; 
 
\t margin: 0px 0px; 
 
\t border-radius: 100%; 
 
\t position: absolute; 
 
\t margin-top: -20px; 
 
\t margin-right: -18px; 
 
} 
 
.checkboxFour > input{visibility: hidden;/* position: absolute; *//* z-index:-1000; *//* overflow: hidden; *//* clip: rect(0 0 0 0); */height: 17px;width: 14px;margin: -2px;margin-right: -7px;padding:0;border:0;} 
 
.checkboxFour label{ 
 
\t width: 10px; 
 
\t height: 10px; 
 
\t border-radius: 100px; 
 
\t transition: all .5s ease; 
 
\t cursor: pointer; 
 
\t top: 0px; 
 
\t position: absolute; 
 
\t left: 2px; 
 
\t z-index: 1; 
 
\t background: #ddd; 
 
\t margin-top: 2px; 
 
\t margin-right: 2px; 
 
} 
 
.checkboxFour input[type=checkbox]:checked + label { 
 
\t background: #f83232; 
 
}

<br> 
 
<br> 
 
<br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput" name=""><label for="checkboxFourInput"> </label> Important</div></td> 
 
<br><br><br><br><br> 
 
<td><div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput_2" name=""><label for="checkboxFourInput_2"> </label> </div>Not Important</td>

변화 당신의 for와 두 번째 레이블과 사업부의 id