复选框验证检查至少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 !'); 
}