javascript - jquery更新价格onclick单选或带有条件的复选框

Question

我创建了一个这样的产品表单。当用户选择“产品类型”和“产品尺寸”时，价格将更新。但在选择尺寸后，如果用户更改产品类型，价格不会更新。我还想禁用尺寸复选框，直到用户选择产品类型。请在 codepen.io 或此处查看我的代码。

代码笔： https ://codepen.io/alshedupur/pen/YLOema

HTML

<div class="club_products row">

  <div class="club_product_image">
    <img src="http://via.placeholder.com/250x350?text=PRODUCT" alt="coffee" class="club_product_wb"/>
  </div>

  <div class="club_product_form">
    <form action method="get">
    <div class="club_product_title">Select Product Type</div>

      <div class="pretty p-default p-round">
        <input type="radio" name="type" value="wb" class="jm_product_type" />
        <div class="state p-success">
            <label>Whole Bean</label>
        </div>
      </div>
      <div class="pretty p-default p-round">
        <input type="radio" name="type" value="rg" class="jm_product_type" />
        <div class="state p-success">
            <label>Roasted Grounded</label>
        </div>
      </div>

    <div class="club_product_title">Select Product Size</div>

      <div class="pretty p-icon p-smooth">
        <input type="checkbox" name="size[]" value="4oz" class="update_price" />
        <div class="state p-success">
          <i class="icon fa fa-check"></i>
          <label>4 oz</label>
        </div>
      </div>
      <div class="pretty p-icon p-smooth">
        <input type="checkbox" name="size[]" value="8oz"  class="update_price" />
        <div class="state p-success">
          <i class="icon fa fa-check"></i>
          <label>8 oz</label>
        </div>
      </div>
      <div class="pretty p-icon p-smooth">
        <input type="checkbox" name="size[]" value="16oz"  class="update_price" />
        <div class="state p-success">
          <i class="icon fa fa-check"></i>
          <label>16 oz</label>
        </div>
      </div>


    <div class="club_product_title">Select Subscription Length</div>   
      <div class="pretty p-default p-round">
        <input type="radio" name="length" value="30days" />
        <div class="state p-success">
            <label>30 Days</label>
        </div>
      </div>
      <div class="pretty p-default p-round">
        <input type="radio" name="length" value="45days" />
        <div class="state p-success">
            <label>45 Days</label>
        </div>
      </div>
      <div class="pretty p-default p-round">
        <input type="radio" name="length" value="60days" />
        <div class="state p-success">
            <label>60 Days</label>
        </div>
      </div>

      <div class="club_product_price">Price: $<span>0</span> USD</div>

      <input type="submit" name="join_our_club" value="Join Our Club" class="btn club_submit" />

    </form>
  </div>

</div>

jQuery

$(document).ready(function(){

  $('input[name=type]').on('click', function(){
    var type = $('input[name=type]:checked').val();

    if(type == 'wb'){
       $(document).on("change", ".update_price", function() {
          var sum = 0;
          $(".update_price:checked").each(function(){
            if($(this).val() == '4oz'){
              sum += 19.99;
            }
            if($(this).val() == '8oz'){
              sum += 35.99;
            }
            if($(this).val() == '16oz'){
              sum += 65.99;
            } 
          });
          $(".club_product_price span").text(sum.toFixed(2));
        });
    }
    if(type == 'rg'){
       $(document).on("change", ".update_price", function() {
          var sum = 0;
          $(".update_price:checked").each(function(){
            if($(this).val() == '4oz'){
              sum += 18.99;
            }
            if($(this).val() == '8oz'){
              sum += 36.99;
            }
            if($(this).val() == '16oz'){
              sum += 66.99;
            } 
          });
          $(".club_product_price span").text(sum.toFixed(2));
        });
    }

  });

});

标签： javascriptjquery

Answer 1

您在复选框上的 onChange 函数正在条件内注册。所以它没有触发，而是在复选框的当前更改上注册。并触发最后注册的更改事件。

试试这个：

$(document).ready(function(){

  $('input[name=type],.update_price').on('click', function(){
    var type = $('input[name=type]:checked').val();

    if(type == 'wb'){
          var sum = 0;
          $(".update_price:checked").each(function(){
            if($(this).val() == '4oz'){
              sum += 19.99;
            }
            if($(this).val() == '8oz'){
              sum += 35.99;
            }
            if($(this).val() == '16oz'){
              sum += 65.99;
            } 
          });
          $(".club_product_price span").text(sum.toFixed(2));
    }
    if(type == 'rg'){
          var sum = 0;
          $(".update_price:checked").each(function(){
            if($(this).val() == '4oz'){
              sum += 18.99;
            }
            if($(this).val() == '8oz'){
              sum += 36.99;
            }
            if($(this).val() == '16oz'){
              sum += 66.99;
            } 
          });
          $(".club_product_price span").text(sum.toFixed(2));
    }

    });

    });