Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的解决方案似乎过于复杂。此外，您应该使用click事件代替change事件进行回调，因为在change发生时，复选标记已经出现在复选框中，所以现在您已经有了删除它。使用click，您可以取消事件，该事件发生在复选标记进入复选框之前。

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>

无法限制已选中复选框的数量

1 个答案: