jQuery onchange單選按鈕價格變化

Question

我想在單選按鈕上添加price onclick/change對我的結果文本框。我使用jQuery 1.11.1和聯繫表單7 Wordpress插件。

這裏是我的HTML代碼

<form novalidate="novalidate" class="wpcf7-form" method="post" action=""> 

<section class="idealsteps-step" style="display: block;"> 
<b> Please Select Number Of Bottles</b><br> 
<span class="wpcf7-form-control-wrap household"><input type="text" aria-invalid="false" aria-required="true" id="household" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" size="40" value="" name="household"></span><p></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

<section class="idealsteps-step" style="display: block;"> 
What will be your preferred pay mode for water charges of 19 Liter bottle?<p></p> 
<p><span class="wpcf7-form-control-wrap paymode"><span class="wpcf7-form-control wpcf7-radio radio form-control staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Cash" name="paymode" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Cash</span></span><span class="wpcf7-list-item last"><input type="radio" value="Coupon Book" name="paymode" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Coupon Book</span></span></span></span></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

<section class="idealsteps-step" style="display: block;"> 
Do you need a Hot &amp; Cold Dispenser? (Price is 14,500)<br> 
<span class="wpcf7-form-control-wrap dispenser"><span class="wpcf7-form-control wpcf7-radio form-control radio staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Yes" name="dispenser" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Yes</span></span><span class="wpcf7-list-item last"><input type="radio" value="No" name="dispenser" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">No</span></span></span></span><p></p> 
<p> Do you need a Cradle Tap &amp; Stand (Price is 325)<br> 
<span class="wpcf7-form-control-wrap cradle"><span class="wpcf7-form-control wpcf7-radio form-control radio staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Yes" name="cradle" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Yes</span></span><span class="wpcf7-list-item last"><input type="radio" value="No" name="cradle" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">No</span></span></span></span></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

Result: 
<fieldset disabled=""> 
<span class="wpcf7-form-control-wrap homeTotal"> 
<input type="text" aria-invalid="false" id="homeTotal" class="wpcf7-form-control wpcf7-text form-control" size="40" value="" name="homeTotal"> 
</span><br> 
</fieldset> 

<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 
<input type="submit" class="wpcf7-form-control wpcf7-submit btn btn-primary" value="Submit"> 
</div> 

</form> 

這裏是我的JS代碼

jQuery("#household").keyup(setValue); 
jQuery('.first [name="paymode"]').change(setValue); 
jQuery('.last [name="paymode"]').change(setValue); 
jQuery('.first [name="dispenser"]').change(setValue); 
jQuery('.last [name="dispenser"]').change(setValue); 
jQuery('.first [name="cradle"]').change(setValue); 
jQuery('.last [name="cradle"]').change(setValue); 
// jQuery("#homeTotal").keyup(setValue); 

function setValue() { 
    var household = jQuery("#household").val(); 
    var paymode1 = jQuery('.first [name="paymode"]:checked').val() = 165; 
    var paymode2 = jQuery('.last [name="paymode"]:checked').val() = 1700; 
    var dispenser1 = jQuery('.first [name="dispenser"]:checked').val() = 14500; 
    var dispenser2 = jQuery('.last [name="dispenser"]:checked').val() = 0; 
    var cradle1 = jQuery('.first [name="cradle"]:checked').val() = 325; 
    var cradle2 = jQuery('.last [name="cradle"]:checked').val() = 0; 

    // if (!txt_value.length || !rad_val.length) return; 
    var res1 = household * 1500; 
    var res2 = res1 * 3; 
    var res3 = res2 + paymode1 + paymode2 + dispenser1 + dispenser2 + cradle1 + cradle2; 
    jQuery('#homeTotal').val(res3); 
} 

我就照PSL answer 這裏是JSFiddle

Answer 1

檢查這個代碼，可能是它的幫助

<form novalidate="novalidate" class="wpcf7-form" method="post" action=""> 

<section class="idealsteps-step" style="display: block;"> 
<b> Please Select Number Of Bottles</b><br> 
<span class="wpcf7-form-control-wrap household"><input type="text" aria-invalid="false" aria-required="true" id="household" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" size="40" value="" name="household"></span><p></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

<section class="idealsteps-step" style="display: block;"> 
What will be your preferred pay mode for water charges of 19 Liter bottle?<p></p> 
<p><span class="wpcf7-form-control-wrap paymode"><span class="wpcf7-form-control wpcf7-radio radio form-control staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Cash" name="paymode" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Cash</span></span><span class="wpcf7-list-item last"><input type="radio" value="Coupon Book" name="paymode" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Coupon Book</span></span></span></span></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

<section class="idealsteps-step" style="display: block;"> 
Do you need a Hot &amp; Cold Dispenser? (Price is 14,500)<br> 
<span class="wpcf7-form-control-wrap dispenser"><span class="wpcf7-form-control wpcf7-radio form-control radio staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Yes" name="dispenser" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Yes</span></span><span class="wpcf7-list-item last"><input type="radio" value="No" name="dispenser" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">No</span></span></span></span><p></p> 
<p> Do you need a Cradle Tap &amp; Stand (Price is 325)<br> 
<span class="wpcf7-form-control-wrap cradle"><span class="wpcf7-form-control wpcf7-radio form-control radio staticRadio"><span class="wpcf7-list-item first"><input type="radio" value="Yes" name="cradle" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">Yes</span></span><span class="wpcf7-list-item last"><input type="radio" value="No" name="cradle" style=""><span class="ideal-radio"></span>&nbsp;<span class="wpcf7-list-item-label">No</span></span></span></span></p> 
<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 

</div> 
</section> 

Result: 
<fieldset disabled=""> 
<span class="wpcf7-form-control-wrap homeTotal"> 
<input type="text" aria-invalid="false" id="homeTotal" class="wpcf7-form-control wpcf7-text form-control" size="40" value="" name="homeTotal"> 
</span><br> 
</fieldset> 

<div class="field buttons"> 
<label class="main">&nbsp;</label><br> 
<input type="submit" class="wpcf7-form-control wpcf7-submit btn btn-primary" value="Submit"> 
</div> 

</form> 

JS代碼

<script type="text/javascript"> 

jQuery("#household").keyup(setValue); 
jQuery('.first input[name="paymode"]').change(setValue); 
jQuery('.last input[name="paymode"]').change(setValue); 
jQuery('.first input[name="dispenser"]').change(setValue); 
jQuery('.last input[name="dispenser"]').change(setValue); 
jQuery('.first input[name="cradle"]').change(setValue); 
jQuery('.last input[name="cradle"]').change(setValue); 

function setValue() { 
    var household = jQuery("#household").val(); 
    var res1 = household * 500; 

    if (jQuery('input[name="paymode"]:checked').val() == "Cash") { 
    // var paymode1 = jQuery('input[name="paymode"]:checked').val(); 
    var household = jQuery("#household").val(); 
    var paymode1 = 165 * household; 
    } 
    else if (jQuery('input[name="paymode"]:checked').val() == "Coupon Book") { 
     var paymode1 = 1700; 
    } 
    else {var paymode1 = 0;} 

    if (jQuery('input[name="dispenser"]:checked').val() == "Yes") { 
     var dispenser1 = 14500; 
    } 
    else if (jQuery('input[name="dispenser"]:checked').val() == "No") { 
     var dispenser1 = 0; 
    } 
    else {var dispenser1 = 0;} 

    if (jQuery('input[name="cradle"]:checked').val() == "Yes") { 
     var cradle1 = 325; 
    } 
    else if (jQuery('input[name="cradle"]:checked').val() == "No") { 
     var cradle1 = 0; 
    } 
    else {var cradle1 = 0;} 

    var res3 = res1 + paymode1 + dispenser1 + cradle1; 
    jQuery('#homeTotal').val(res3); 
} 

</script>