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


Donate : Link

Medium Blog : Link

Applications : 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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s