javascript - 涉及数组时限制选中的框数量

Question

我对 JavaScript 的东西相当业余，所以如果这个问题听起来有点愚蠢，我深表歉意。

我目前正在尝试编写一些涉及表单的代码，其中可以选择的复选框数量受到限制。到目前为止，我遇到的最适合我的目的的方法是此处详细介绍的方法:

http://www.javascriptkit.com/script/script2/checkboxlimit.shtml

它在大多数情况下都有效，但当复选框需要输出数组时我遇到了问题。例如，如果我将输入行写为:

<input type="checkbox" name="choice[]" value="One" /> One<br />
<input type="checkbox" name="choice[]" value="Two" /> Two<br />
<input type="checkbox" name="choice[]" value="Three" /> Three<br />

我已经尝试了很多方法，但我不知道如何更改代码，以便它与输入名称字段中的括号一起使用。

Answer 1

这里有几件事:

1. 本教程引用了 checkboxlimit(document.forms.world.countries, 2)。这不适用于 []。您可以使用getElementsByClassName
2. 如果您取消选中某个复选框，这似乎不会按预期工作，因为它适用于“onclick”，并且永远不会增加选中复选框的数量。

我已经调整了这个 fiddle 中的代码:https://jsfiddle.net/ad8t5sju/

我改变了什么:

  var elems = form.getElementsByClassName('checkbox');

我在这里使用了getElementsByClassName，以便我们可以轻松获取作为特定表单子(monad)项的复选框。不幸的是，HTMLElement 只有 getElementsByTagName 和 getElementsByClassName，因此我们不能在这里轻松使用名称。

for (var i = 0; i < elems.length; i++) {
if (elems[i].checked) {
    ++count;
}

您会在这里看到我考虑了已经选中的复选框。这样，如果您默认选中了 1 个，则如果您的限制为 5 个，则可以选中另外 4 个。

 elems[i].addEventListener('click', function() {
    if (this.checked) {

    if (count + 1 > limit) {
        alert ("no more than " + limit + " must be checked");
      this.checked = false;
      return false;
    }
    ++count;
  } else {
    --count;

    if (count < 0) {
        count = 0;
    }
  }
});

在这里，我们不是在取消选中某个框时添加 0，而是减少计数。这样，如果我们取消勾选并再次勾选，同一个框就不会计数两次。