Bootstrap 3 Button Checkbox

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<form id="myform">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Material Design Switch Demos</div>

        <!-- List group -->
        <ul class="list-group">
          <li class="list-group-item">
            Bootstrap Switch Default
            <div class="material-switch pull-right">
              <input id="someSwitchOptionDefault" name="checkbox[]" type="checkbox" />
              <label for="someSwitchOptionDefault" class="label-default"></label>
            </div>
          </li>
          <li class="list-group-item">
            Bootstrap Switch Primary
            <div class="material-switch pull-right">
              <input id="someSwitchOptionPrimary" name="checkbox[]" type="checkbox" />
              <label for="someSwitchOptionPrimary" class="label-primary"></label>
            </div>
          </li>
          <li class="list-group-item">
            Bootstrap Switch Success
            <div class="material-switch pull-right">
              <input id="someSwitchOptionSuccess" name="checkbox[]" type="checkbox" />
              <label for="someSwitchOptionSuccess" class="label-success"></label>
            </div>
          </li>
          <li class="list-group-item">
            Bootstrap Switch Info
            <div class="material-switch pull-right">
              <input id="someSwitchOptionInfo" name="checkbox[]" type="checkbox" />
             ...

CSS

.material-switch > input[type="checkbox"] {
  display: none;
}

.material-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px;
}

.material-switch > label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}

.material-switch > label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px;
}

JavaScript

$("input[type='checkbox']").change(function() {

  var n = $("input:checked").length;
  alert(n);
});

$(document).ready(function() {

  $("#myform").submit(function(e){
  e.preventDefault();
  var elem = document.getElementsByName('checkbox[]');
  var atLeast1 = 0;
  console.log(elem);
  for(var i = 0; i < elem.length; i++) {
     if(elem[i].checked) {
     		atLeast1 = 1;
        i = elem.length;
     }     
  }
  
  if(atLeast1 == 0) alert("ERROR");
  else alert("NO ERROR");
  
  });

});