试图限制可以使用javascript检查的复选框的数量

Question

首先让我说其他类似的问题有jquery响应，我试图只使用javascript。我试图限制在此代码中一次可以检查的复选框的数量。在我的javascript代码中，我看到我的'checkedcount'变量只增加了一次。例如，我有5个可用复选框，如果选中所有复选框，则应增加到5。从我所看到的情况来看，它只增加到1。我只编写代码，直到递增部分，这是我坚持的部分。我认为一旦该部分被修复，我就可以计算出其余代码。

var showSpan = function(){
	var option = this,
  		option_value = option.value;
      spanID = document.getElementById(option_value),
      spanID_value = spanID.id;
      
      if (option.checked){
      	if (option_value === spanID_value) spanID.textContent = "Display text";
      } else {
      	spanID.textContent = "";
      }
};

var checkLimit = function(){
	var option = this,
  		option_value = option.value,
      checkedcount = 0,
      maxChecked = 2;
      
      if (option.checked) {
      	checkedcount += 1;
        console.log(checkedcount);
      }
};


var elements = document.getElementsByClassName('display');
var e = new Event('change');

for ( var i=0, len=elements.length; i<len; i++ ){
	var element = elements[i];
  element.addEventListener('change', showSpan);
  element.addEventListener('change', checkLimit);
  element.dispatchEvent(e);
}

<input type="checkbox" name="1" class="display" value="1"> 1 <span id="1"></span>
<br>
<input type="checkbox" name="2" class="display" value="2"> 2 <span id="2"></span>
<br>
<input type="checkbox" name="3" class="display" value="3"> 3 <span id="3"></span>
<br>
<input type="checkbox" name="4" class="display" value="4"> 4 <span id="4"></span>
<br>
<input type="checkbox" name="5" class="display" value="5"> 5 <span id="5"></span>

JSFiddle

Answer 1

问题

每次执行checkedcount时，变量0都会在checkLimit()初始化。最后一个值将不会被恢复，因为该变量仅存在于checkLimit()执行中，并在执行后被删除。

解决方案

您必须在checkLimit()函数的全局范围内声明该变量，如以下示例所示。

// global scope (accessible in all functions)
var checkedcount = 0

var showSpan = function(){
	var option = this,
  		option_value = option.value;
      spanID = document.getElementById(option_value),
      spanID_value = spanID.id;
      
      if (option.checked){
      	if (option_value === spanID_value) spanID.textContent = "Display text";
      } else {
      	spanID.textContent = "";
      }
};

var checkLimit = function(){
	var option = this,
  		option_value = option.value,
      maxChecked = 2;
      
      if (option.checked) {
        // the global variable accessible so updated
      	checkedcount += 1;
        console.log(checkedcount);
      }
};


var elements = document.getElementsByClassName('display');
var e = new Event('change');

for ( var i=0, len=elements.length; i<len; i++ ){
	var element = elements[i];
  element.addEventListener('change', showSpan);
  element.addEventListener('change', checkLimit);
  element.dispatchEvent(e);
}

<input type="checkbox" name="1" class="display" value="1"> 1 <span id="1"></span>
<br>
<input type="checkbox" name="2" class="display" value="2"> 2 <span id="2"></span>
<br>
<input type="checkbox" name="3" class="display" value="3"> 3 <span id="3"></span>
<br>
<input type="checkbox" name="4" class="display" value="4"> 4 <span id="4"></span>
<br>
<input type="checkbox" name="5" class="display" value="5"> 5 <span id="5"></span>