Question

当我点击第二个复选框时，首先激活复选框。

但是当我点击First复选框时，每件事情都可以。

请点击第二个复选框，看看发生了什么。

我有1000个复选框！ 并且更改ID不是一个好方法！

如果您需要更多详细信息，请对问题发表评论！

以下是代码请看一下：

.checkboxFour{
	width: 14px;
	height: 14px;
	background: #dddddd;
	margin: 0px 0px;
	border-radius: 100%;
	position: absolute;
	margin-top: -20px;
	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{
	width: 10px;
	height: 10px;
	border-radius: 100px;
	transition: all .5s ease;
	cursor: pointer;
	top: 0px;
	position: absolute;
	left: 2px;
	z-index: 1;
	background: #ddd;
	margin-top: 2px;
	margin-right: 2px;
}
.checkboxFour input[type=checkbox]:checked + label {
	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>

THANKYOU！

Answer 1

＆＃13;

.checkboxFour{
	width: 14px;
	height: 14px;
	background: #dddddd;
	margin: 0px 0px;
	border-radius: 100%;
	position: absolute;
	margin-top: -20px;
	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{
	width: 10px;
	height: 10px;
	border-radius: 100px;
	transition: all .5s ease;
	cursor: pointer;
	top: 0px;
	position: absolute;
	left: 2px;
	z-index: 1;
	background: #ddd;
	margin-top: 2px;
	margin-right: 2px;
}
.checkboxFour input[type=checkbox]:checked + label {
	background: #f83232;
}

＆＃13;

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

＆＃13;

更改第二个标签的for和id以及div

Answer 2

这种情况发生了，因为您已将相同的id-s输入到输入中，并且两个标签都引用了该ID：

.checkboxFour{
	width: 14px;
	height: 14px;
	background: #dddddd;
	margin: 0px 0px;
	border-radius: 100%;
	position: absolute;
	margin-top: -20px;
	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{
	width: 10px;
	height: 10px;
	border-radius: 100px;
	transition: all .5s ease;
	cursor: pointer;
	top: 0px;
	position: absolute;
	left: 2px;
	z-index: 1;
	background: #ddd;
	margin-top: 2px;
	margin-right: 2px;
}
.checkboxFour input[type=checkbox]:checked + label {
	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>

期望的复选框未激活

2 个答案: