Question

我尝试了几个javascript脚本来限制在我的文件中检查的复选框数量，但没有任何效果。

以下是我试过的一个样本

<form id="world" name="world">
    <input type="checkbox" name="rGroup" value="1" id="r1" name="plan" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" name="plan"/>
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" name="plan"/>
    <label class="whatever" for="r3"></label>

    <script type="text/javascript">
        //Syntax: checkboxlimit(checkbox_reference, limit)
        checkboxlimit(document.forms.world.plan, 2)
    </script>

Answer 1

首先，显然，您的代码中未定义checkboxlimit。我确实环顾四周寻找这个功能......我正在从Javascript checkbox validation not working的答案中获取代码。

其次，你没有document.forms.world.plan。请参阅HTML代码，该群组的名称不是plan，而是rGroup。

这些都是小问题，没有什么是你无法解决的，只需要对代码有一点了解。这就是为什么你获得了一个免费的咆哮：虽然你可以找到几乎已经由第三方完成的任何事情的代码（有些人会敦促你不要重新发明轮子），而且代码重用是真的。重要的，复制和粘贴是它最古老的形式（在从印刷品中描述之后，就是这样）...学习编程和理解代码很重要的原因是能够适应它并在它没有时修复它。做你想做的事。询问任何专业开发人员（即使是那些经验不足的人），他们会告诉你调试和学习比实际编写新代码需要更多的时间。

对于摘要：阅读。

注意：从互联网上的随机人员复制的代码也可能带有安全漏洞，甚至漏洞。

事实上，我从这个问题得到的代码显示了一些不好的做法......但无论如何，我已经解决了这个问题。你可以看到下面的固定代码：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      var checkedcount=0;
      for (var i=0; i<checkgroup.length; i++)
      {
        checkedcount+=(checkgroup[i].checked)? 1 : 0;
        if (checkedcount>limit)
        {
          alert("You can only select a maximum of "+limit+" checkboxes");
          this.checked=false;
        }
      }
    });
  }
}

checkboxlimit(document.forms.world.rGroup, 2);

<form id="world" name="world">
    <input type="checkbox" name="rGroup" value="1" id="r1" name="plan" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" name="plan"/>
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" name="plan"/>
    <label class="whatever" for="r3"></label>
</form>

以上代码有效，你知道它是如何工作的吗？让我们再去看一下细节：

这里我们只是遍历复选框：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    // ...
  }
}

对于每个复选框，我们为click事件添加一个事件处理程序：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      // ...
    });
  }
}

事件处理程序将在内部迭代复选框：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      var checkedcount=0;
      for (var i=0; i<checkgroup.length; i++)
      {
        // ...
      }
    });
  }
}

并计算检查了多少个：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      var checkedcount=0;
      for (var i=0; i<checkgroup.length; i++)
      {
        checkedcount+=(checkgroup[i].checked)? 1 : 0;
        // ...
      }
    });
  }
}

如果我们超出限制，我们会显示一条消息：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      var checkedcount=0;
      for (var i=0; i<checkgroup.length; i++)
      {
        checkedcount+=(checkgroup[i].checked)? 1 : 0;
        if (checkedcount>limit)
        {
          alert("You can only select a maximum of "+limit+" checkboxes");
          // ...
        }
      }
    });
  }
}

取消选中您点击的框：

function checkboxlimit(checkgroup, limit){
  for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].addEventListener('click',function(){
      var checkedcount=0;
      for (var i=0; i<checkgroup.length; i++)
      {
        checkedcount+=(checkgroup[i].checked)? 1 : 0;
        if (checkedcount>limit)
        {
          alert("You can only select a maximum of "+limit+" checkboxes");
          this.checked=false;
        }
      }
    });
  }
}

我想建议你深入挖掘一下。考虑这些练习：

您如何更改消息？
如何在页面元素内显示消息而不是消息框？
您是否可以在达到限制时禁用未选中的复选框？

也许您可能会发现Getting started with the Web from MDN有用。当然，它的大部分（至少在这种情况下）将是the DOM。还有一些第三方库可以更容易地使用DOM（例如jQuery，you might not need）。

Answer 2

$(function(){
var limit = 2;//Limit of selections
var state = 0;//Selection counter

	//I detect when a common element changes
	$(".valida").change(function(){
  		//Check if the item is checked
      if($(this).is(':checked')){
          if(state<limit){
          	state = parseInt(state) + 1;
          }else{
          	$(this).prop('checked', false); // Unchecks it
          }
        }else{
        	state = parseInt(state) - 1;
        }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="valida" name="rGroup" value="1" id="r1" name="plan" />
    <label class="whatever" for="r1">Primero</label>
<input type="checkbox" class="valida" name="rGroup" value="2" id="r2" name="plan"/>
    <label class="whatever" for="r2">Segundo</label>
<input type="checkbox" class="valida" name="rGroup" value="3" id="r3" name="plan"/>
    <label class="whatever" for="r3">Tercero</label>

如果您尝试的是在客户端，请尝试这种方式，这样就可以限制文档或范围内的复选框数量。

正如你在snipet中看到的那样，我只能点击2个元素，为了点击另一个元素，我必须取消选择前一个元素

用于限制已选中复选框数量的脚本

2 个答案: