javascript - 单选按钮的自定义 iCheck 设计可防止单击时输出总价

Question

我试图理解为什么当我单击单选按钮时，我看不到总价的输出，但是当我在 jsfiddle 或单独的 test.php 页面中运行代码时，我没有看到总价的输出请引用 iCheck 的脚本，显示总价格输出。 iCheck 的设计有何干扰？我该如何解决这个问题？

icheck.js

 $(document).ready(function(){
  $('input').iCheck({
   checkboxClass: 'icheckbox_square-blue',
   radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
 });
});

price.js//单击单选按钮时输出总价

  $(document).ready(function(){
  //alert();
     $(document).on("click", ".btn-checkbox-plan", function(e){
       if($(".btn-checkbox-plan").is(':checked')){

        $("#output").html($(this).val());
       }

     });  

    });

代码:

<div class="checkout">
                    <span id="checkout-title">Checkout</span>
                    <div class="plan-wrapper">
                        <input class="btn-checkbox-plan" type="radio" name="groupnine" value="$699" /> <label id="silver-plan">Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <input class="btn-checkbox-plan" type="radio" name="groupnine" value="$999" /> <label id="gold-plan"> Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                    </div>
                    <div class="logo-wrapper">
                        <span id="personalized-logo">Personalized Logo</span>
                        <span id="logo-price">$49.99</span>
                    </div>
                    <div class="tax-wrapper">
                        <div class="wrapper-a">
                            <span id="tax">Tax + Processing</span>
                            <span id="tax-price">$0.00</span>
                       </div>
                    </div>
                    <div class="total-wrapper">
                        <div class="wrapper-b">
                            <span id="total">Total</span>
                            <output type="number" name="price" id="output"></output>
                        </div>
                    </div>
                    <div class="controls submit-btn">
                        <input  type="submit" value="Checkout" />
                        <input  type="reset" value="Clear" />
                    </div>
                    <div class="controls back-btn">
                        <input  class="back-button" type="button" value="Back" />
                    </div>
                </div>

Answer 1

您需要使用回调http://fronteed.com/iCheck/

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});