如果我从第一个复选框中选择一个，它只允许我检查一位老师，如果我同时选择这两个，它允许我检查两位老师，这是我希望它工作的方式。
我遇到的问题是，如果我取消选中第一个复选框之一，我可以选择任意数量的教师。
因此，我想对此问题进行排序，并总是检查选择了多少主题，并在此基础上，允许用户仅从第二堆复选框中选择该数量的教师。
var count = 0
function countCheckedBoxes(elem) {
if (german.checked && french.checked) {
if (elem.checked) {
if (count <= 2) {
count = count + 1;
if (count > 2) {
count = 2;
elem.checked = false;
}
}
} else {
count = count - 1;
if (count < 0) count = 0;
}
} else if (german.checked || french.checked) {
if (elem.checked) {
if (count <= 1) {
count = count + 1;
if (count > 1) {
count = 1;
elem.checked = false;
}
}
} else {
count = count - 1;
if (count < 0) count = 0;
}
}
}* {
box-sizing: border-box;
}
label {
display: flex;
align-items: center;
color: #A9A9A9;
font: 13.3333px Arial;
position: relative;
}
span {
background-color: white;
}
label>span {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
border: 1px solid #ccc;
margin-right: 10px;
border-radius: 3px;
transition: all 0.3s;
}
input:checked+label {
color: black;
animation: bounce 250ms;
}
input:checked+label>span {
border: 10px solid black;
animation: bounce 250ms;
}
input:checked+label>span:before {
content: "";
position: absolute;
top: 6px;
left: 4px;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
transform: rotate(45deg);
transform-origin: 0% 100%;
animation: checked-box 125ms 250ms forwards;
}
@keyframes checked-box {
/* Animation of the tick symbol */
0% {
width: 0;
height: 0;
border-color: white;
transform: translate(0, 0) rotate(45deg);
}
33% {
width: 4px;
height: 0;
border-color: white;
transform: translate(0, 0) rotate(45deg);
}
100% {
width: 4px;
height: 8px;
border-color: white;
transform: translate(0, -8px) rotate(45deg);
}
}
@keyframes bounce {
0% {
transform: scale(1);
}
33% {
transform: scale(.70);
}
100% {
transform: scale(1);
}
}<div id="chooseSubject" style="margin-bottom:24px;">
<label id="selectSubject" class="form-control">Select your subject(s)</label>
<table style="width:auto;text-align:left;margin-bottom:1px;margin-top:13px">
<tr>
<th style="font:inherit;padding-right:110px;display: flex;">
<input type="checkbox" id="french" name="subjects[]" value="french" style="display:none; position:absolute; left:9999px;">
<label for="french" style="margin-right:98px;"><span></span>French</label>
<input type="checkbox" id="german" name="subjects[]" value="german" style="display:none; position:absolute; left:9999px;">
<label for="german" style="float:right;"><span></span>German</label>
</th>
</tr>
</table>
</div>
<!-- TEACHER SELECTION -->
<div id="chooseTeacher" style="margin-bottom:24px;">
<label id="selectTeacher" class="form-control">Select your teacher(s)</label>
<table style="width:auto;text-align:left;margin-bottom:1px;margin-top:13px">
<tr>
<th style="font:inherit;display:flex;">
<input type="checkbox" id="archer" name="teachers[]" value="archer" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
<label for="archer" style="margin-right:68px;"><span></span>Miss Archer</label>
<input type="checkbox" id="craig" name="teachers[]" value="craig" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
<label for="craig"><span></span>Miss Craig</label>
</th>
<th style="font:inherit;padding-right:110px;display: flex;">
<input type="checkbox" id="devine" name="teachers[]" value="devine" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
<label for="devine" style="margin-right:65px;"><span></span>Miss Devine</label>
<input type="checkbox" id="dorrity" name="teachers[]" value="dorrity" style="display:none; position:absolute; left:9999px;" onclick="countCheckedBoxes(this)">
<label for="dorrity"><span></span>Miss Dorrity</label>
</th>
</tr>
</table>
</div><br>
答案 0 :(得分：0)
考虑这种情况：
法语和＆amp;德国人检查。我们开始检查In [50]: a = [np.random.randint(1,4,L) for L in lens]
In [51]: %timeit leastReps(combinations(a)) #@Daniel Forsman's soln
1 loops, best of 3: 328 ms per loop
In [52]: %timeit get_minrep_combs_optimized(a)
10 loops, best of 3: 29.5 ms per loop
，但代码不允许检查其中两个以上。
然后我们取消选择法语或德语。因此，在此之后，任何input[teachers[]]调用都将落入countCheckedBoxes(elem)条件的正文中。 首先检查不允许＆amp; count会重置为1.这就是导致错误的地方。现在，如果您检查另一个if (german.checked || french.checked)元素，它将属于input[teachers[]]的第一次内部检查{因为count = 1}＆amp;将允许检查新检查的元素。
一个解决方案是在if (german.checked || french.checked)或input[teachers[]] 未选中时取消选中所有french元素。这将安全地重新开始在处女地上的过程。
以前的解决方案是创建小错误＆amp;脏代码。所以我改变了主意。
由于我们没有检查german取消选中＆amp;＆amp;它给subjects[]留下了错误的值。
只需为count＆amp;添加一个eventlistner重置元素如果检测到事件是因为取消选中input[subjects[]]之一解决了问题。
我还添加了一项检查，以便在未检查上述任何内容时阻止input[subjects[]] checking。这是：
input[teachers[]] var count = 0
function resetElements(elem){
if(elem.checked == false){
archer.checked = false;
craig.checked = false;
devine.checked = false;
dorrity.checked = false;
count = 0;
}
}
function countCheckedBoxes(elem) {
if (!(german.checked) && !(french.checked)) {
elem.checked = false;
} else if (german.checked && french.checked) {
if (elem.checked) {
if (count <= 2) {
count = count + 1;
if (count > 2) {
count = 2;
elem.checked = false;
}
}
} else {
count = count - 1;
if (count < 0)
count = 0;
}
} else if (german.checked || french.checked) {
if (elem.checked) {
if (count <= 1) {
count = count + 1;
if (count > 1) {
count = 1;
elem.checked = false;
}
}
} else {
count = count - 1;
if (count < 0)
count = 0;
}
}
}
* {
box-sizing: border-box;
}
label {
display: flex;
align-items: center;
color: #A9A9A9;
font: 13.3333px Arial;
position: relative;
}
span {
background-color: white;
}
label>span {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
border: 1px solid #ccc;
margin-right: 10px;
border-radius: 3px;
transition: all 0.3s;
}
input:checked+label {
color: black;
animation: bounce 250ms;
}
input:checked+label>span {
border: 10px solid black;
animation: bounce 250ms;
}
input:checked+label>span:before {
content: "";
position: absolute;
top: 6px;
left: 4px;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
transform: rotate(45deg);
transform-origin: 0% 100%;
animation: checked-box 125ms 250ms forwards;
}
@keyframes checked-box {
/* Animation of the tick symbol */
0% {
width: 0;
height: 0;
border-color: white;
transform: translate(0, 0) rotate(45deg);
}
33% {
width: 4px;
height: 0;
border-color: white;
transform: translate(0, 0) rotate(45deg);
}
100% {
width: 4px;
height: 8px;
border-color: white;
transform: translate(0, -8px) rotate(45deg);
}
}
@keyframes bounce {
0% {
transform: scale(1);
}
33% {
transform: scale(.70);
}
100% {
transform: scale(1);
}
}