Question

我的目标是限制页面上所选复选框的数量。

<html>
<head>
<script>
var globalCounter = 0;
var maxCount = 2;
function updateCounter(obj) {
    globalCounter += (obj.checked ? 1 : -1);
    console.log(globalCounter);
    if (globalCounter > maxCount && obj.checked) {
        obj.checked = false;
        globalCounter = maxCount;
        return false;
    }
    return true;
}
</script>
</head>
<body>
<input type=checkbox onclick="updateCounter(this);">
<input type=checkbox onclick="updateCounter(this);">
<input type=checkbox onclick="updateCounter(this);">
<input type=checkbox onclick="updateCounter(this);">
</body>
</html>

在我尝试双击IE 11中的复选框之前，一切似乎都很好.2 onclick个事件已触发，而在第二个事件中我的obj.checked不正确。

有解决方法吗？

Answer 1

一些注意事项：

不要使用内联事件处理程序。
不要听click事件。复选框可以通过其他方式更改，例如键盘。当您双击时，IE有时不会触发click事件。
无需返回布尔值。

假设您不会动态创建其他复选框，

var globalCounter = 0,
    maxCount = 2,
    els = document.querySelectorAll('input[type="checkbox"]');

for(var i=0; i<els.length; ++i)
  els[i].addEventListener('change', handler);

function handler(e) {
  globalCounter += this.checked ? 1 : -1;
  if (globalCounter > maxCount) {
    this.checked = false;
    globalCounter = maxCount;
  }
}

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

Answer 2

如果我可以推荐更好的方法。。。

＆＃13;

function updateCounter(obj) {

  var checkboxes = document.getElementsByName('check1');
  var checked = [];

  for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      checked[checked.length] = checkboxes[i];
    }
  }

  if (checked.length > 2) {
    obj.checked = false;
  }

}

＆＃13;

<body>
  <input type=checkbox name="check1" onclick="updateCounter(this);">
  <input type=checkbox name="check1" onclick="updateCounter(this);">
  <input type=checkbox name="check1" onclick="updateCounter(this);">
  <input type=checkbox name="check1" onclick="updateCounter(this);">
</body>

＆＃13;

在IE 11中双击复选框状态

2 个答案: