使用 jQuery 从两个输入表单中计算值

Question

我正在尝试将 Level 1 和 Level 2 的分数相加，并在<div id="score"></div> 中显示结果。

到目前为止，这是我所做的，但它不仅不适用于所有输入，而且看起来很混乱，我认为这不是解决我想要实现的目标的正确方法。我重复了几乎相同的事情，一次又一次，应该有一种更简单和诗意的写作方式。

非常感谢您提出的建议，如何才能写得更好？

$(document).ready(function() {
    $(document).on("input", function() {
        FScore = 0;
        if (document.getElementById("1").checked) {
            Score = FScore + 1;
        }
        if (document.getElementById("2").checked) {
            Score = FScore + 2;
        }
        if (document.getElementById("3").checked) {
            Score = FScore + 3;
        }
        if (document.getElementById("4").checked) {
            Score = FScore + 4;
        }
        if (document.getElementById("5").checked) {
            Score = FScore + 5;
        }
        if (document.getElementById("6").checked) {
            Score = FScore + 6;
        }
        if (document.getElementById("7").checked) {
            Score = FScore + 7;
        }
        if (document.getElementById("8").checked) {
            Score = FScore + 8;
        }
        $('#score').html(Score);
    })
    $("#1").trigger("input");
});

form { 
    position: relative; 
    top: 100px; 
    left: 100px; 
    background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,.65);
    border-radius: 3px;
    border: solid 1px #ddd;
}
input { display: none; }
input:checked + label { 
    background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
    border: solid 1px rgba(0,0,0,.15);
    color: white; 
    box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label { 
    font-family: helvetica;
    cursor: pointer; 
    display: inline-block; 
    border: solid 1px transparent;
    margin-right: 2px; 
    width: 50px; 
    height: 40px; 
    text-align: center; 
    line-height: 40px;
    border-radius: 3px; 
}
label:last-child { margin-right: 0; }
label:hover {     
    background: rgba(77, 144, 254, .5); 
    border: solid 1px rgba(0,0,0,.15); 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <form>
      Level One:<br>
      <input type="radio" name="first" id="1" value="1" checked="checked" /> 
      <label for="1">1</label>
      <input type="radio" name="first" id="2" value="2" />     
      <label for="2">2</label>
      <input type="radio" name="first" id="3" value="3" />     
      <label for="3">3</label>
      <input type="radio" name="first" id="4" value="4" />     
      <label for="4">4</label>
   </form>
   <form>
      Level Two:<br>
      <input type="radio" name="second" id="5" value="5" checked="checked" /> 
      <label for="small">5</label>
      <input type="radio" name="second" id="6" value="6" />     
      <label for="6">6</label>
      <input type="radio" name="second" id="7" value="7" />     
      <label for="7">7</label>
      <input type="radio" name="second" id="8" value="8" />     
      <label for="8">8</label>
   </form>
</div>
<div class="container">
   <label>Result:</label>
   <div id="score"></div>
</div>

Answer 1

更简单的方法如下：

$(document).ready(function() {
    $("input").change(function() {
        $('#score').html( +$('input[name="first"]:checked').val() + +$('input[name="second"]:checked').val() );
    })
    $("#1").trigger("change");
});

form { 
    position: relative; 
    top: 100px; 
    left: 100px; 
    background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,.65);
    border-radius: 3px;
    border: solid 1px #ddd;
}
input { display: none; }
input:checked + label { 
    background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
    border: solid 1px rgba(0,0,0,.15);
    color: white; 
    box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label { 
    font-family: helvetica;
    cursor: pointer; 
    display: inline-block; 
    border: solid 1px transparent;
    margin-right: 2px; 
    width: 50px; 
    height: 40px; 
    text-align: center; 
    line-height: 40px;
    border-radius: 3px; 
}
label:last-child { margin-right: 0; }
label:hover {     
    background: rgba(77, 144, 254, .5); 
    border: solid 1px rgba(0,0,0,.15); 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <form>
      Level One:<br>
      <input type="radio" name="first" id="1" value="1" checked="checked" /> 
      <label for="1">1</label>
      <input type="radio" name="first" id="2" value="2" />     
      <label for="2">2</label>
      <input type="radio" name="first" id="3" value="3" />     
      <label for="3">3</label>
      <input type="radio" name="first" id="4" value="4" />     
      <label for="4">4</label>
   </form>
   <form>
      Level Two:<br>
      <input type="radio" name="second" id="5" value="5" checked="checked" /> 
      <label for="5">5</label>
      <input type="radio" name="second" id="6" value="6" />     
      <label for="6">6</label>
      <input type="radio" name="second" id="7" value="7" />     
      <label for="7">7</label>
      <input type="radio" name="second" id="8" value="8" />     
      <label for="8">8</label>
   </form>
</div>
<div class="container">
   <label>Result:</label>
   <div id="score"></div>
</div>

注意语法+$('input[name="first"]:checked') 将检查输入的字符串值强制转换为数字。您也可以使用parseInt() 函数。

Answer 2

请注意，HTML ID 不能以数字开头。 （这里不是阻塞问题，但很高兴知道我猜）

试试这个：

$(document).on("change", "form", function() {

  var result = 0;

  $("input:checked").each(function() {
    result += Number($(this).val());
  })

  $("#score").html(result)

});