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").validate({
    ignore: ":hidden",
    rules: {
      "checkbox[]": {
        required: function(element) {
          if ($("input[name='checkbox[]']").is(':checked')) {
            return e.options[e.selectedIndex].value == "";
          } else {
            return false;
          }
        }
      }
    },
    messages: {
      "checkbox[]": "<span style=\"color: #a94442;\">Um dos campos devem ser marcada</span>"
    },
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    submitHandler: function(form) {

      //....Submit post...
    }

  });

});