javascript - jQuery onchange 单选按钮价格变化

Question

我想将单选按钮上的单击/更改价格添加到结果文本框中。我正在使用 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>