Question

当我单击复选框以更新显示字段时，我想捕获显示字段中的内容，并在另一个显示字段中显示它。在理想情况下，第二个字段（即总字段）会从其内容中添加或减去第一个字段中显示的内容。

任何帮助将不胜感激。

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>

Answer 1

您是否要对所有复选框值求和？然后尝试这个。

<div id="c_b">
  <input type="checkbox" name="vehicle1" value="10" onchange="calc()"> bike<br>
  <input type="checkbox" name="vehicle2" value="20" onchange="calc()"> car<br>
  <input type="checkbox" name="vehicle3" value="50" onchange="calc()"> boat<br>
</div>
<div>
  <input type="text" id="t" readonly />
</div>

function calc() {
    var allVals = 0;
     $('#c_b :checked').each(function() {
       allVals += parseInt($(this).val());
     });
     $('#t').val(allVals);
 }

Answer 2

您需要使用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);
   });

使用jQuery更改单独字段中的显示

2 个答案: