jquery错误相同值获取单选按钮？

Question

$('input[name=vehicle]').change(function() {
  if (this.checked) {
    $('#carcost').show();
    var vn = $('input[name=vehicle]:radio').val();
    var pp = $('#ppriceh').val();
    alert(vn);
    if (vn == 'sedan') {
      var px = pp;
    } else if (vn == 'suv') {
      var px = pp + 20;
    } else {
      var px = pp * 3;
    }
    $('#carcost span').text(px);

  } else {
    $('#carcost').hide();
  }
});

<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="sedan"> <strong>sedan</strong>

      <div id="pricev" class="vehiclePrice suvprice">$177
        <input type="hidden" id="ppriceh" name="vrate" value="59.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_mkt8.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">4</div>
      <div class="vehicleLugg">2</div>

    </div>
  </label>
</div>


<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="suv"> <strong>suv</strong>

      <div id="pricev" class="vehiclePrice suvprice">$177
        <input type="hidden" id="ppriceh" name="vrate" value="59.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_suv3.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">6</div>
      <div class="vehicleLugg">3</div>

    </div>
  </label>
</div>


<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="van"> <strong>van</strong>

      <div id="pricev" class="vehiclePrice suvprice">$177
        <input type="hidden" id="ppriceh" name="vrate" value="59.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_van1.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">10</div>
      <div class="vehicleLugg">5</div>

    </div>
  </label>
</div>

总是只显示轿车当单选按钮选择SUV显示轿车同样显示轿车为什么这些显示相同的价值...我使用数据库获取所有汽车价值...

提示显示价值轿车..

请帮帮我，

Answer 1

您需要找到隐藏的输入值，相对于选中的复选框

$('input[name=vehicle]').change(function() {
  if (this.checked) {
    $('#carcost').show();
    var vn = this.value;
    //convert the value to numeric
    var pp = +$(this).closest('.vehicleItem').find('input[name="vrate"]').val() || 0;

    snippet.log(vn + ':' + pp)

    if (vn == 'sedan') {
      var px = pp;
    } else if (vn == 'suv') {
      var px = pp + 20;
    } else {
      var px = pp * 3;
    }
    $('#carcost span').text(px);

  } else {
    $('#carcost').hide();
  }
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="carcost">Cost: <span></span>
</div>
<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="sedan" /> <strong>sedan</strong>

      <div id="pricev" class="vehiclePrice suvprice">$180
        <input type="hidden" id="ppriceh" name="vrate" value="180.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_mkt8.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">4</div>
      <div class="vehicleLugg">2</div>

    </div>
  </label>
</div>


<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="suv"> <strong>suv</strong>

      <div id="pricev" class="vehiclePrice suvprice">$177
        <input type="hidden" id="ppriceh" name="vrate" value="177.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_suv3.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">6</div>
      <div class="vehicleLugg">3</div>

    </div>
  </label>
</div>


<div class="vehicleItem">
  <label>
    <div class="contur ">
      <input type="radio" name="vehicle" id="vehicle0" class="vehicleRadio inpColor c_blue" value="van"> <strong>van</strong>

      <div id="pricev" class="vehiclePrice suvprice">$177
        <input type="hidden" id="ppriceh" name="vrate" value="177.00" />
      </div>
      <div class="vehicleImage">
        <img src="http://server14.testingserver.ca/bestairportlimo/wp-content/uploads/2015/07/vehicle_van1.jpg" width="100" height="80" border="0">
      </div>
      <div class="vehiclePax">10</div>
      <div class="vehicleLugg">5</div>

    </div>
  </label>
</div>