时间戳

首页 > 解决方案 > 使用 jquery 在单独的字段中更改显示

jquery - 使用 jquery 在单独的字段中更改显示

问题描述

当我单击一个复选框时，它会更新一个显示字段，我想捕获显示字段中的内容并将其显示在不同的显示字段中。在一个完美的世界中，第二个字段（这是一个总字段）将从其内容中添加或减去第一个字段中显示的内容。

任何帮助，将不胜感激。

HTML

<tr>
    <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="toggleAmputee(this,50.00)"/>
        <label for="amputeeGolfer">Amputee Golfer</label></td>
    <td align="left"><label for="amputeeFee">$50.00</label></td>
    <td></td>
    <td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00" readonly="readonly"/></td>
 </tr>

jQuery

<script>
    function toggleAmputee(element,price){
    if(element.checked){
        document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) + price;
        $('#amputeeFee').change(function() {
            $('#totalFees').val($(this).val());
        });
    }else{
        document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) - price;
    }
    }
</script>

标签： jqueryhtml

解决方案

您需要使用 jquery 脚本，如下 所示 https://jsfiddle.net/8Ly1b4d3/

//html
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <tr>
      <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee"/>
      <label for="amputeeGolfer">Amputee Golfer</label></td>
      <td align="left"><label for="amputeeFee" id="amputeeFee">$50.00</label></td>
      <td></td>
      <td><input name="amputeeFee" type="number" id="newAmputeeFee" class="tblRight" size="10" value="0.00" readonly="readonly"/></td>
   </tr>

//jquery
   $('#amputeeGolfer').change(function(){
     var price = 50.00;
     var value = $('#amputeeFee').text();
     value = value.replace('$','');
     if($('#amputeeGolfer'). prop("checked") == true){
       var new_value = parseInt(value) + parseInt(price);
     } else { 
       new_value = parseInt(value) - parseInt(price);
     }
     $('#newAmputeeFee').val(new_value);
   });

推荐阅读