title: jquery validation plugin for checkbox- at least one selected
body: <p>I am using jquery validation plugin for form fields validation. I have multiple checkboxes in the form. I tried couple of different ways for the logic 'at least one need to be selected' but nothing is working but when i try something out of validation plugin its working fine with this code. If you can tell me how i can incorporate this below code within validation plugin</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('.submit').click(function() {
        checked = $("input[type=checkbox]:checked").length;
  
        if(!checked) {
           // &lt;form:errors path="chk" cssClass="errors" element="div" /&gt;
           $(".form-error").text("* You must check at least one checkbox.").show();
         // alert("You must check at least one checkbox.");
          return false;
        }
  
      });
  });
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
  
  
    $(document).ready(function(){
  
        $("#myForm").validate({
  
  
  
        rules: {
            crcode: "required",
            dtype: "required",
            pview: "required",
            prview: "required",
  
  
        },
  
        messages: {
            crcode: "Rate code is required",
            dtype: "Dwell type is required",
            pview: "Public view is required",
            prview: "Private view is required",
  
  
        }
  
        });
        });
  
    &lt;/script&gt;
  Here are my checkboxes
   &lt;div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" &gt;
              &lt;input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" /&gt;
              &lt;div class="[ btn-group ]"&gt;
                  &lt;label for="fancy-checkbox-default1" class="[ btn btn-default ]"&gt;
                      &lt;span class="[ glyphicon glyphicon-ok ]"&gt;&lt;/span&gt;
                      &lt;span&gt; &lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label for="fancy-checkbox-default1" class="[ btn btn-default active ]"&gt;
                     Video+Internet
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
   &lt;div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;"&gt;
              &lt;input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off"  class="fancy" /&gt;
              &lt;div class="[ btn-group ]"&gt;
                  &lt;label for="fancy-checkbox-default2" class="[ btn btn-default ]"&gt;
                      &lt;span class="[ glyphicon glyphicon-ok ]"&gt;&lt;/span&gt;
                      &lt;span&gt; &lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label for="fancy-checkbox-default2" class="[ btn btn-default active ]"&gt;
                     Video+Phone&amp;nbsp;&amp;nbsp;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
   &lt;div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;"&gt;
              &lt;input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" /&gt;
              &lt;div class="[ btn-group ]"&gt;
                  &lt;label for="fancy-checkbox-default3" class="[ btn btn-default ]"&gt;
                      &lt;span class="[ glyphicon glyphicon-ok ]"&gt;&lt;/span&gt;
                      &lt;span&gt; &lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label for="fancy-checkbox-default3" class="[ btn btn-default active ]"&gt;
                     Video+Security
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>