In this tutorial, we will show you how to check at least one checkbox is checked or not in jquery. We have tried to explain this simple step by step. you can see jquery for least one checkbox checked.
we have used a form selector to target the form and a function will execute whenever someone tries to submit the form. This function will check if at least one check box is checked or not.
we have used if the condition inside this function if at least one input type checkbox is check, the condition will output true. For this purpose input:checkbox selector is used to selecting all the checkboxes to check which checkbox is checked.
let’s see bellow example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>How to check atleast one checkbox is checked or not in JQuery</h1>
<strong>Colors:</strong>
<input type="checkbox" value="true" class="color-check" name="colors[]"> Red
<input type="checkbox" value="true" class="color-check" name="colors[]"> Blue
<input type="checkbox" value="true" class="color-check" name="colors[]"> Black
<input type="checkbox" value="true" class="color-check" name="colors[]"> Orange
<button class="submit">Submit</button>
</div>
<script type="text/javascript">
$(".submit").click(function(){
if($('.color-check').filter(':checked').length < 1){
alert("Please Check at least one Color Box");
return false;
}else{
alert("Proceed");
}
});
</script>
</body>
</html>
Hope you liked it.
