CODEWITHSUNDEEP
javascriptcheckbox
demond611
demond611

Reputation: 35

Trying to limit the number of checkboxes that can be checked using javascript

Let me start by saying other questions similar to this had jquery responses and I'm trying to use only javascript. I'm trying to limit the number of checkboxes that can be checked at one time in this code. In my javascript code I'm seeing my 'checkedcount' variable increments only 1 time. For example I have 5 checkboxes available it should increment to 5 if all checkboxes are checked. It's only incrementing to 1 though, from what I'm seeing. I only wrote the code up until the incrementing part, which is the part I'm stuck on. I think I can figure the rest of the code once that part is fixed.

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

Upvotes: 0

Views: 44

Answers (1)

xdrm
xdrm

Reputation: 399

Problem

The variable checkedcount is initialized at 0 each time checkLimit() is executed. The last value won't be restored because the variable only exists within checkLimit() execution and is removed after its execution.

Solution

You must declare that variable in a scope that is global to the checkLimit() function as in the following example.

// 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>

Upvotes: 1

Related Questions