Question

我正在尝试制作一个能够：

的功能

浏览我在html文档中检查过的所有复选框
只允许＆＃39; checkboxLimit＆＃39;要检查（即文件中可以检查10个中的4个复选框）
返回已选中复选框的id的数组（我称之为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]);
    }

上面的所有代码都是可用的，但下面的代码是我遇到问题的地方。在＆＃39; onclick＆＃39;之后执行的功能很好地工作，因为如果我在函数中提醒cbl，它就像我喜欢的那样工作（如下所示）。然而，一旦cbl在＆＃39; onclick＆＃39;之后被提醒。功能，它不再相同。

    // 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循环更简单：

  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);
    }
  }

使用类会更好，因此您可以使用其他复选框，这些复选框不属于受限制的集合。

使用onclick函数更改变量

3 个答案: