使用jQuery计算两种输入形式的值

Question

我正在尝试添加1级和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)

});