修复计算器中的功能

Question

由于我对javascript知之甚少，我需要你的帮助。

这个我的脚本是一个简单的计算器，但我无法使某些功能起作用。我只需要

• 选择无线电场时，它会显示字段的值
• 然后立即将所选无线电字段的dropdwon数字框x值相乘并添加到最终计算中

下面的脚本工作，如果可能的话，我需要一个在代码中尽可能少地包装的解决方案

$(document).ready(function() {
  $(".valores1").change(function() {
    var total = 50;
    total += $('input[class="valores1"]:checked').get().reduce(function(tot, el) {
      return tot + Number(el.value);
    }, 0);
        
    var f = document.getElementById("valores7");    
    var itemSelecionadof = f.value;
         
    var e = document.getElementById("valores2");
    var itemSelecionado = e.options[e.selectedIndex].value;
    var primeiroDigito = (itemSelecionado.substring(0,1));
    total=total+(primeiroDigito*100);
    ///////////////////////////////////////////////////////////////
    var d = document.getElementById("valores3");
    var itemSelecionado3 = d.options[d.selectedIndex].value;
    var primeiroDigito3 = (itemSelecionado3.substring(0,1));
    total=total+(primeiroDigito3*itemSelecionadof);
    //////////////////////////////////////////////////////////////
    var g = document.getElementById("valores4");
    var itemSelecionado4 = g.options[g.selectedIndex].value;
    
    if (g.value == 1) {
     d.value = 0;
     g.value = 0;
     f.value = 0
     total = total-(primeiroDigito3*100);
     $('#total1').val(total);
     }
    //////////////////////////////////////////////////////////////
    
    
    
    //aqui pega primeiro digito
    
    $('#total1').val(total.toFixed(2));     
  });  
});

PERA:<input type="checkbox" class="valores1"  name="direcao" value="10" id="option_1"  />
Banana:<input type="checkbox" class="valores1" name="bilingue" value="15" id="option_1"  /><br />

<select id="valores2"   class="valores1 form-control" name="tipo carnes" >
    <option value="0">Meat</option>
    <option value="1">1 Picanha</option>
    <option value="2">2 Picanhas</option>
    <option value="3">3 Picanhas</option>
     
</select>  <br /><br />

Small Box<input type="radio" class="valores1" name="normal" value="100" id="valores7" />
Big Box<input type="radio" class="valores1" name="normal"    value="150" id="valores7"/>
&nbsp;&nbsp;====>View Value of the box<input type="text" size="5"  readonly="" id="valorsacola" name="valor da sacola"  value="0.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
<br />
<select id="valores3"   class="valores1 form-control" name="nsacolas" >
    <option value="0">Number of box</option>
    <option value="1">x1</option>
    <option value="2">x2</option>
    <option value="3">x3</option>
    
</select>  
<br /><hr />

delete box calculation
<select id="valores4"   class="valores1 form-control" name="cadeirinha2" >
    <option value="0"></option>
    <option value="1">zerar</option>
    <option value="2">x2</option>    
</select>  
<br /><br /><br />

minimum consummation
<input type="text" size="5"  readonly="" name="valor" id="total1" value="50.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

首先，无线电按钮的重复ID无效，ID必须是唯一的。 name属性适用于此，遵循此想法，代码将是这样的：

Small Box <input type="radio" class="valores1" name="normal" value="100" name="valores7" />
Big Box<input type="radio" class="valores1" name="normal" value="150" name="valores7"/>

当您添加一个侦听器以查看valores1更改时，您可以通过这种方式更改此radiobuttons。

$("input[name=valores7]").change(function(e) {
    //this change the value in your input
    $('#valorsacola').val($(this).val());

    //is not clear for me how you calculate the total but with the value of
    // $(this).val() you can retrieve it.  
});