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.
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 come 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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.