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。这样，如果我们取消勾选并再次勾选，同一个框就不会计数两次。