At Least One Checkbox Is Checked From All CheckBox Group | Code Factory

<!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>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Code Factory

Code Factory

More from Medium

What to Look Before Hiring a .Net Developer for Your Project?

Loopback 4: Super-fast REST APIs

Git, Magical Tool Used by Software Developers

Series Three: Git Essential Training: The Basics.