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秀轎車相同的麪包車秀轎車爲什麼這些顯示相同的值...我使用的數據庫我得到的HTML所有的汽車價值轎車..

警報顯示值轎車..

請大家幫忙，我..

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>