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

Question

首先让我说与此类似的其他问题有 jquery 响应，而我尝试仅使用 javascript。我试图限制在此代码中可以一次检查的复选框的数量。在我的 javascript 代码中，我看到我的“checkedcount”变量仅增加了 1 次。例如，我有 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

问题

每次执行 checkLimit() 时，变量 checkedcount 都会初始化为 0。最后一个值不会被恢复，因为该变量仅存在于 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>