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

在这里结识：

教程引用checkboxlimit（document.forms.world.countries，2）。这不适用于[]。您可以使用getElementsByClassName
如果您取消选中一个框，因为它可以在＆＃39; onclick＆＃39;上工作，并且永远不会增加复选框的数量，这看起来不会按预期工作。

我已经改编了这个小提琴中的代码：https://jsfiddle.net/ad8t5sju/

我改变了什么：

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

我在这里使用getElementsByClassName，以便我们可以轻松获取特定表单的子项复选框。 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。如果我们取消并再次打勾，那么同一个盒子不会计数两次。

Answer 2

使用该脚本above，您可以将其更改为使用.elements获取元素组并应用相同的自定义函数：

<script type="text/javascript">

// Syntax: checkboxlimit(checkbox_reference, limit)

var world_form = document.forms.choices; // the form
var my_checkboxes = world_form.elements['choice[]']; // check boxes
checkboxlimit(my_checkboxes, 2);

</script>

Fiddle

Answer 3

简单易行

<form id="world" name="world">
    <input type="checkbox" name="countries[]" /> USA<br />
    <input type="checkbox" name="countries[]" /> Canada<br />
    <input type="checkbox" name="countries[]" /> Japan<br />
    <input type="checkbox" name="countries[]" /> China<br />
    <input type="checkbox" name="countries[]" /> France<br />
    <input type="submit" />
    </form>
    <script type="text/javascript">
    $('input:checkbox').change(function() {
        var limit = 2;
        if($("[type='checkbox']:checked").length > limit)
        {
            alert("You can only select a maximum of "+limit+" checkboxes")
            this.checked=false;
        }
    });
    </script>

限制涉及数组时检查的框数

3 个答案: