At Least One Checkbox Is Checked From All CheckBox Group | Code Factory
2 min readDec 17, 2019
Reference Link : Link
File : checkBox.jsp
<!DOCTYPE html >
<html>
<head>
<title>checkbox</title><!-- for bootstrap css and js -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center>
<h2>checkbox</h2>
</center>
<form action="#" class="form-horizontal" method="post" onsubmit="return checkFormData()">
<!-- Check Box 1 -->
<div class="form-group">
<label class="control-label col-sm-4">Check Box 1</label>
<div class="col-sm-5">
<div class='row'>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox1" id="checkbox1" tabindex="1" value=Male /> Male<br />
</div>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox1" id="checkbox1" tabindex="1" value=Female /> Female<br />
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Check Box 2</label>
<div class="col-sm-5">
<div class='row'>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox2" id="checkbox2" tabindex="2" value=ck1 /> ck1<br />
</div>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox2" id="checkbox2" tabindex="2" value=ck2 /> ck2<br />
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Check Box 3</label>
<div class="col-sm-5">
<div class='row'>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox3" id="checkbox3" tabindex="3" value=ck3 /> ck3<br />
</div>
<div class='col-sm-6'>
<input type="checkbox" name="checkbox3" id="checkbox3" tabindex="3" value=ck4 /> ck4<br />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-5">
<input type="submit" class="btn btn-success" value="Submit" />
</div>
</div>
</form>
<font color='red'><p id="errMessage"></p> </font>
</div>
</body>
<script>
function checkFormData() {
if (!$('input[name=checkbox1]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
return false;
}
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$('input[name=checkbox3]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Thank you... #CodeFactory!");
return true;
}
</script>
<script></script>
</html>