At Least One Checkbox Is Checked From All CheckBox Group

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>

Tags :
Check if checkbox is checked with jQuery
validation for multiple checkboxes
Checkbox validation - at least one selected
Require at least one checkbox be checked
Submit form only if at least one checkbox is checked
Multiple Checkboxes at least 1 required
check atleast one checkbox is checked on form submission
Validating that at least one checkbox is checked.
Only submit if at least one checkbox is checked (dynamically)
Validations for atleast one checkbox checked in javascript

Search This Blog

Code Factory

At Least One Checkbox Is Checked From All CheckBox Group | #CodeFactory

Comments

Post a Comment

Popular posts from this blog

How to get IP address and MAC address of client in java | #CodeFactory

FTP Connection In Installed Alfresco | Code Factory