javascript - 使用 javascript 检查至少 1 个复选框和最多 3 个复选框的复选框验证

Question

至少应选中一个复选框，最多可选中 3 个复选框。

function checkout(){
    var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
    if (checkBoxes.length > 3){
        alert('You cannot select more than 3 books');
        return false;
    }
    if (checkBoxes.length == 0) {
        alert('Please select at least 1 book');
        return false;
    }

但是使用此代码，无论我选择的书籍数量如何，都会出现消息“您不能选择超过 3 本书”。

为了满足只需要选中一个复选框，我使用了以下代码，效果很好。

function checkout(){
    var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
    var isChecked = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            isChecked = true;
        };
    };
    if ( isChecked ) {
        alert( 'Your books have been sent to your mail !' );
    } else {
       alert( 'Please, check at least one checkbox!' );
       return false;
    }
}

但是我如何获得最大约束呢？

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 document.querySelectorAll('.myCheckBox:checked');

获取所有选中的复选框

function checkout(){
  const checkBoxes = document.querySelectorAll('.myCheckBox:checked');

  if (checkBoxes.length > 3){
      alert('You cannot select more than 3 books');
      return false;
  } else if (!checkBoxes.length) {
    alert( 'Please, check at least one checkbox!' );
  }
}

<input class="myCheckBox" type="checkbox">
<input class="myCheckBox" type="checkbox">
<input class="myCheckBox" type="checkbox">
<input class="myCheckBox" type="checkbox">

<button onClick="checkout()">Check</button>