復選框驗證，用於檢查至少1個復選框，最多3個使用javascript

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');獲取所有選中的復選框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> 

Answer 2

你走在正確的軌道上！ 訣竅是簡單地計算已檢查的書籍而不是僅使用布爾值：

function checkout(){
    var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
    var nbChecked = 0;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            nbChecked++;
        };
    };
    if ( nbChecked> 3 ) {
        alert( 'You cannot select more than 3 books' );
        return false;
    } else if(nbChecked == 0){
       alert( 'Please, check at least one checkbox!' );
       return false;
    }else{
       //Do what you need for form submission, if needed...
    }
}

Answer 3

創建一個計數器來計算已檢查的數量

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

Answer 4

如果IE9 +，Chrome或Firefox使用帶循環的計數器或使用querySelectorAll ：

function checkout(){
    //For all
    var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
    var length= 0;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            length++;
        };
    };

    //In IE9+, Chrome or Firefox you can do:
    //var length= document.querySelectorAll('.myCheckBox:checked');

    if ( length> 3 ) {
        alert("You cann't select more than 3");
        return false;
    } else if(length == 0){
       alert("Please, check at least one!");
       return false;
    }
    alert( 'Your books have been sent to your mail !' );
}

Answer 5

您是否檢查了復選框的指示是布爾標志

var isChecked = false;
...
if(isChecked) {
...

現在，這與詢問isChecked是否等於1的邏輯相同。

您可以類似計算選中復選框的次數。 然后，只需檢查您是否可以使用復選框的數量。

if ( checkBoxes[i].checked ) {
    //isChecked = true;
    isChecked++;
};

isChecked現在正在計算它們

if ( isChecked > 0 && isChecked <= 3  ) {

檢查它們是否在1到3之間（含）