изменения переменного с функцией OnClick

Question

Я пытаюсь создать функцию, которая будет:

1. пробегает все флажки я проверенные в HTML документе
2. только позволяют «checkboxLimit», чтобы проверить (т.е. 4 флажков из 10 могут быть проверены в документе)
3. возвращает массив идентификаторов проверяемых флажков (которые я называю CBL)

в настоящее время моя проблема имеет что-то делать с размахомonclick функция.

function getCheckboxes(checkboxLimit) { 
    // clear cbl 
    cbl = ['','','','']; 

    // contstuct list of checkbox tags 
    inputs = document.getElementsByTagName('input'); 
    var checkboxes = []; 
    for (var i = 0 ; i < inputs.length ; i++) { 
     if (inputs[i].type == 'checkbox') 
     checkboxes.push(inputs[i]); 
    } 

Весь вышеприведенный код является функциональным, но ниже приведен код, в котором я столкнулся с проблемами. Функция, которая выполняется после «onclick», работает хорошо, потому что, если я предупреждаю cbl в функции, она работает, как мне нравится (показано ниже). Однако, как только cbl будет предупрежден после функции onclick, это уже не то же самое.

// construct list of checked checkboxes (limited) 
    for (var i = 0 ; i < checkboxes.length ; i++) { 
     // if any checkbox is clicked 
     checkboxes[i].onclick = function() { 
      var checkCount = 0; 
      // run through each of the checkboxes 
      for (var j = 0 ; j < checkboxes.length ; j++) { 
       // if index checkbox is checked 
       if (checkboxes[j].checked == true) { 
        // add to count 
        checkCount++; 
        // if count is above limit, uncheck 
        // otherwise add to list   
        if (checkCount > checkboxLimit) 
         this.checked = false; 
        else 
         cbl[checkCount-1] = checkboxes[j].id; 
       } 
      } 
      // alert that displays cbl how I want 
      alert(cbl); 
     } 
     // alert that does not display cbl how I want 
     alert(cbl); 
    } 
} 

Так можно ли каким-то образом преодолеть эту проблему? Я бы предпочел остаться в стороне от JQuery, но все, что может заставить меня иметь функциональный код, будет работать на этом этапе.

Answer 1

Попробуйте что-то больше, как это:

function checkboxValidate(collection, min, max){ 
    var mn = typeof min === 'undefined' ? 0 : min; 
    var mx = typeof max === 'undefined' ? Infinity : max; 
    var cb = [], n = 0; 
    for(var i=0,l=collection.length; i<l, i++){ 
    var c = collection[i]; 
    if(c.type === 'checkbox' && c.checked){ 
     cb.push(c); n++; 
    } 
    } 
    if(n < mn){ 
    // somthing.innerHTML = 'Minimum Requirement Failure'; 
    return false; 
    } 
    else if(n > mx){ 
    // somthing.innerHTML = 'Maximum Requirement Failure'; 
    return false; 
    } 
    else{ 
    return cb; 
    } 
} 
anotherElement.onclick = function(){ 
    var checkedArray = checkboxValidate(document.getElementsByTagName('input'), 0, 3)); 
    if(checkedArray && checkedArray[0]){ 
    // checkedArray has each checkbox Element - more properties than just `id` 
    } 
    else{ 
    // checkedArray would be false or not have any checked with min 0 
    } 
} 

Регулировка по мере необходимости.

Answer 2

Непрозрачный грубый образец. Может быть, вы можете получить что-то из этого:

Fiddle

function limitCheck(n) { 
    var x = []; 
    document.addEventListener('click', function(e) { 
     var i, t = e.target; 
     if (t.type === 'checkbox') { 
      if ((i = x.indexOf(t.id)) > -1) { 
       console.log('remove ' + i + ', ' + t.id); 
       x.splice(i, 1); 
      } else if (x.length < n) { 
       x.push(t.id); 
      } else { 
       console.log('LIM'); 
       e.preventDefault(); 
       e.stopPropagation(); 
      } 
      console.log(x); 
     } 
    }); 
} 

limitCheck(4); 

Без отладки:

function limitCheck(n) { 
    var x = []; 
    document.addEventListener('click', function(e) { 
     var i, t = e.target; 
     if (t.type === 'checkbox') { 
      if ((i = x.indexOf(t.id)) > -1) { 
       x.splice(i, 1); 
      } else if (x.length < n) { 
       x.push(t.id); 
      } else { 
       e.preventDefault(); 
       e.stopPropagation(); 
      } 
     } 
    }); 
} 

Answer 3

Вы можете поместить щелчок слушателя предку флажков, вероятно, они в форме поэтому используйте это. Кроме того, необходимо учитывать кнопки сброса и кнопки, которые проверяются по умолчанию (так что вам необходимо запустить функцию при загрузке страницы для предварительного заполнения списка):

var checkboxLimit = 4; 
var cbl; 

function limitCheckboxes(form, event) { 

    // Clear checkbox list 
    var cblTemp = []; 

    // get element that the click came from 
    var tgt = event.target || event.srcElement; 

    // See if it was a reset 
    var reset = tgt.type == 'reset'; 

    // Count checked checkboxes 
    // If click was from reset, reset the checkbox first 
    var cb, cbs = form.getElementsByTagName('input'); 

    for (var i=0, iLen=cbs.length; i<iLen; i++) { 
    cb = cbs[i]; 

    if (cb.type == 'checkbox') { 
     cb.checked = reset? cb.defaultChecked : cb.checked; 
     if (cb.checked) { 
     cblTemp.push(cb.id); 
     } 
    } 
    } 

    // If too many, remove the last one that was checked, 
    // uncheck it and show a message 
    if (cblTemp.length > checkboxLimit && tgt.type == 'checkbox') { 
    cblTemp.splice(cblTemp.indexOf(tgt.id), 1); 
    tgt.checked = false; 
    console.log('removed ' + tgt.id); 
    } 

    // update cbl 
    cbl = cblTemp; 

    // Debug 
    console.log(cbl); 
} 

Вы также можете получить проверено флажков на одном дыхании, используя querySelectorAll:

var cb, cbs = document.querySelectorAll('input[type="checkbox"]'); 

и цикл проще:

for (var i=0, iLen=cbs.length; i<iLen; i++) { 
    cb = cbs[i]; 
    cb.checked = reset? cb.defaultChecked : cb.checked; 

    if (cb.checked) { 
     cblTemp.push(cb.id); 
    } 
    } 

было бы даже ставка ter, чтобы использовать класс, поэтому вы можете иметь другие флажки, которые не являются частью ограниченного набора.