根据单选输入状态复制一个值

Question

我正在创建一个 WordPress 主题，我需要在其中将一些值复制到具有动态填充字段的重力表单页面。我正在加载选项（空调电源）作为 ACF 中继器字段，并与该特定单元的价格一起保存。我需要根据选中的单选将此价格复制到静态 div 字段以及隐藏的输入字段中，以便可以在表单中使用。

下面是我需要实现的简单结构和到目前为止的代码。我需要的只是将保存在某处的价格（可以是 PHP 变量或任何东西）复制到 div（可能是 jQuery）并同时复制到隐藏字段中，并根据用户的选择动态更改它。

<form class="order" action="<?php echo get_permalink(26); ?>">
<div>
<?php if($power) { ?>
    <div class="power">
        <?php $power_counter = 1; while(have_rows('power')) { the_row();
            $power= get_sub_field('power');
            $price = get_sub_field('price');
        ?>
            <input type="radio" name="power" id="power<?php echo $power_counter; ?>" value="<?php echo get_the_title() . ' ' . $power; ?>"<?php if($power_counter == 1) { echo "checked"; }; ?>><label for="power<?php echo $power_counter; ?>"><?php echo $power; ?></label>
            <input type="hidden" name="price_wo_vat" id="price<?php echo $power_counter; ?>" value="<?php echo $price; ?>">
            <div id="price<?php echo $power_counter; ?>" class="price"><?php echo $price. __(' CZK','klima'); ?></div>
        <?php $power_counter++; }; ?>
    </div>
<?php }; ?>
<input type="number" name="pcs" value="1" min="1" max="99">
<input type="submit" value="<?php _e('Order','klima'); ?>">
</div>

Answer 1

$(document).ready(function() { 
    var selPrice = parseInt($('#selected_price').val()),
        chosenPrice = parseInt($('input[name="power"]:checked').val()),
        qty = parseInt($('input[name="pcs"]').val()),
        initTotal = calcTotal(chosenPrice, qty);
  
    $('#total').text(initTotal);
  
    $('input[name="pcs"]').on('change', function() { 
        var myQty = $(this).val(),
            chooseQty = parseInt($('input[name="power"]:checked').val()),
            newQty = calcTotal(chooseQty, myQty);

        $('#total').text(newQty);
    });
  
    $('input[name="power"]').on('click', function() { 
        var myPrice = $(this).val(),
            myQty = parseInt($('input[name="pcs"]').val()),
            newTotal = calcTotal(myPrice, myQty);
      
        $(this).attr('checked',true);
        $('#total').text(newTotal);
    });
  
});

function calcTotal(price, qty) {
    var total = price * qty;
    return total
}

.power {
    margin-bottom: 10px; 
}

.total-container {
    padding: 5px;
    background-color: #DDD;
    width: 50px;
    margin-bottom: 10px;
}

input[name='pcs'] {
    padding: 5px;
    text-align: center;
    width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="order" action="#">
<div>
    <div class="power">
        <!-- #Power 1 -->
        <input type="radio" name="power" id="power1" value="62" data-xvat="80" checked="true">
        <label for="power1">Option 1 - £62</label>
        <br>
  
        <!-- #Power 2 -->
        <input type="radio" name="power" id="power2" value="114" data-xvat="160">
        <label for="power2">Option 2 - £114</label>
        <br>
      
        <!-- #Power 3 -->
        <input type="radio" name="power" id="power3" value="139" data-xvat="240">
        <label for="power3">Option 3 - £139</label>
        <br>

      
    </div>
    <div class="total-container">£<span id="total"></span></div> 
    <input type="hidden" name="selected_price" id="selected_price" value="0">
    <input type="number" name="pcs" value="1" min="1" max="99">
    <input type="submit" value="Order">
</div>