At least one checkbox should be checked and at max 3 checkboxes can be checked.

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

But with this code, irrespective of the number of books I am selecting, the message 'You cannot select more than 3 books is appearing'.

For satisfying the just one checkbox needs to be checked, I used the following code, which worked fine.

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

But how do I get the maximum constraint in?

Any help would be greatly appreciated.

At least one checkbox should be checked and at max 3 checkboxes can be checked.

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

But with this code, irrespective of the number of books I am selecting, the message 'You cannot select more than 3 books is appearing'.

For satisfying the just one checkbox needs to be checked, I used the following code, which worked fine.

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

But how do I get the maximum constraint in?

Any help would be greatly appreciated.

• javascript
• checkbox

• just count the amount of checks in your loop – krisph Commented Aug 16, 2017 at 7:26
• @krisph I did i<3 but that didn't work. – Steve Doson Commented Aug 16, 2017 at 7:28
• 1 document.querySelectorAll(".myCheckBox:checked").length – Andreas Commented Aug 16, 2017 at 7:29
• @SteveDoson Strictly no Jquery ? or you can use Jquery ? – Suresh Atta Commented Aug 16, 2017 at 7:29

5 Answers 5

You can get all the checked checkboxes using 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>

You were on the right track! The trick is to simply count the checked books instead of using just a boolean:

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

Create a counter to count number of checked

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

Use counter with loop or use querySelectorAll if IE9+, Chrome or 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 !' );
}

Your indication of whether there is a checkbox there checked is a Boolean flag

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

Now, this is the same logic as asking if isChecked is equal to 1.

You can similary count the number of times you e across a checked checkbox. Then it's just a matter of checking if you're ok with the number of checkboxes.

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

isChecked now is counting them

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

to check if they are between 1 and 3 (inclusive)