Question

如果我从第一个复选框中选择一个，它只允许我检查一位老师，如果我同时选择这两个，它允许我检查两位老师，这是我希望它工作的方式。

我遇到的问题是，如果我取消选中第一个复选框之一，我可以选择任意数量的教师。

因此，我想对此问题进行排序，并总是检查选择了多少主题，并在此基础上，允许用户仅从第二堆复选框中选择该数量的教师。

＆＃13;

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

＆＃13;

* {
  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);
  }
}

＆＃13;

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

＆＃13;

Answer 1

原因：

考虑这种情况：

法语和＆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);
                }
            }

允许根据之前的答案选择一定数量的复选框

1 个答案:

原因：

解决方案：

更新[已解决]