複選框驗證檢查至少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

你是在正確的軌道上！關鍵是要簡單地計算選中的書，而不是隻用布爾：

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 2

您可以開始使用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 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

你是否有檢查有一個複選框指示是布爾標誌

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

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

可以與之相似計數次數你遇到一個複選框。然後，只需檢查複選框的數量是否可以。

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

isChecked現在正指望他們

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

檢查，如果他們是1和3（含）

Answer 5

與循環使用計數器或使用querySelectorAll之間如果IE9 +，Chrome或Firefox：

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