title: The custom iCheck design of the radio button prevents the output of Total price when clicked
body: <p>I was trying to understand why is it that when I click my radio button, I do not see the output of the total price, but when I ran my code in jsfiddle or in a seperate test.php page where I did not refer the script for the iCheck, the total price output was showing. How does the design of the iCheck interfere? And how can I fix this issue?</p>
  
  <p>icheck.js</p>
  
  <pre><code> $(document).ready(function(){
    $('input').iCheck({
     checkboxClass: 'icheckbox_square-blue',
     radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
   });
  });
  </code></pre>
  
  <p>price.js //outputs the Total price when the radio button is clicked</p>
  
  <pre><code>  $(document).ready(function(){
    //alert();
       $(document).on("click", ".btn-checkbox-plan", function(e){
         if($(".btn-checkbox-plan").is(':checked')){
  
          $("#output").html($(this).val());
         }
  
       });  
  
      });
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="checkout"&gt;
                      &lt;span id="checkout-title"&gt;Checkout&lt;/span&gt;
                      &lt;div class="plan-wrapper"&gt;
                          &lt;input class="btn-checkbox-plan" type="radio" name="groupnine" value="$699" /&gt; &lt;label id="silver-plan"&gt;Silver Plan&lt;/label&gt;
                          &lt;label id="silver-plan-price"&gt;$699&lt;/label&gt;
                          &lt;input class="btn-checkbox-plan" type="radio" name="groupnine" value="$999" /&gt; &lt;label id="gold-plan"&gt; Gold Plan&lt;/label&gt;
                          &lt;label id="gold-plan-price"&gt;$999&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="logo-wrapper"&gt;
                          &lt;span id="personalized-logo"&gt;Personalized Logo&lt;/span&gt;
                          &lt;span id="logo-price"&gt;$49.99&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="tax-wrapper"&gt;
                          &lt;div class="wrapper-a"&gt;
                              &lt;span id="tax"&gt;Tax + Processing&lt;/span&gt;
                              &lt;span id="tax-price"&gt;$0.00&lt;/span&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="total-wrapper"&gt;
                          &lt;div class="wrapper-b"&gt;
                              &lt;span id="total"&gt;Total&lt;/span&gt;
                              &lt;output type="number" name="price" id="output"&gt;&lt;/output&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="controls submit-btn"&gt;
                          &lt;input  type="submit" value="Checkout" /&gt;
                          &lt;input  type="reset" value="Clear" /&gt;
                      &lt;/div&gt;
                      &lt;div class="controls back-btn"&gt;
                          &lt;input  class="back-button" type="button" value="Back" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>