javascript - 无法限制选中复选框的数量

Question

不确定为什么脚本不起作用。当您尝试选择两个以上时，希望它取消选中一个框。例如，如果您选择“CHEAP”和“FAST”，然后尝试选择“GOOD”，则“FAST”将被取消选中。

        document.querySelector('body').className = 'has-js';
        var checked = [];
            [].forEach.call(document.querySelectorAll('input[type="checkbox"]'), function (checkbox) {
          checkbox.addEventListener('change', function (e) {
            ga('send', 'event', 'checkbox', 'trigger');
        if (checkbox.checked && checked.length === 2) {
              var uncheckTarget = checked[Math.floor(Math.random() * checked.length)];
          uncheckTarget.checked = false;
        }
            checked = document.querySelectorAll('input[type="checkbox"]:checked');
          });
        });

      <div class="container">
            <input type="checkbox" id="fast">
            <label class="red" for="fast">FAST</label>

            <input type="checkbox" id="good">
            <label class="green" for="good">GOOD</label>

        <input type="checkbox" id="cheap">
        <label class="blue" for="cheap">CHEAP</label>
          </div>

Answer 1

您的解决方案似乎过于复杂。此外，您应该使用 click 事件而不是 change 事件进行回调，因为当 change 发生时，复选标记已存在于复选框，所以现在您必须将其删除。通过单击，您可以取消该事件，该事件发生在复选标记进入复选框之前。

var boxes = Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]'));

boxes.forEach(function(chk) {
  chk.addEventListener('click', function (e) {
    if (document.querySelectorAll("input[type=checkbox]:checked").length > 2) {
      e.preventDefault();
      alert("You already have 2 checkboxes checked. Uncheck one and try again!");
    }  
  });
});

<div class="container">
  <input type="checkbox" id="fast"><label class="red" for="fast">FAST</label>
  <input type="checkbox" id="good"><label class="green" for="good">GOOD</label>
  <input type="checkbox" id="cheap"><label class="blue" for="cheap">CHEAP</label>
</div>