我使用Bootstrap构建了一个表单。用户单击单选按钮，页面底部会显示一个数字。
<!-- FOOTER -->
<div class="container">
<div class="row">
<div class="col-lg-offset-3 col-xs-12 col-lg-6">
<div class="jumbotron">
<div class="row text-center">
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>Broadband Speed Calculator</h2>
</div>
<div class="text-center col-lg-12">
<!-- CONTACT FORM https://github.com/jonmbake/bootstrap3-contact-form -->
<form class="form-horizontal" role="form" method="post" action="" id="broadbandForm">
<div class="form-group">
<label for="video" class="col-xs-12 control-label text-left">Number of people who use streaming video (eg. Youtube or Netflix) on your network</label>
<div class="col-xs-12 btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="0" checked>0</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="9">1</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="18">2</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="27">3</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoStream" value="36">4+</label>
</div>
</div>
<div class="form-group">
<label for="videoChat" class="col-xs-12 control-label text-left">Number of people who use video chat (eg. Skype or Facetime) on your network</label>
<div class="col-xs-12 btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="0" checked>0</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="9">1</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="18">2</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="27">3</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="videoChat" value="36">4+</label>
</div>
</div>
<div class="form-group">
<label for="gaming" class="col-xs-12 control-label text-left">Number of people who use online gaming on your network</label>
<div class="col-xs-12 btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="gaming" value="0" checked>0</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="5">1</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="10">2</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="15">3</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="gaming" value="20">4+</label>
</div>
</div>
<div class="form-group">
<label for="audioStream" class="col-xs-12 control-label text-left">Number of people who use streaming audio on your network</label>
<div class="col-xs-12 btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="audioStream" value="0" checked>0</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".32">1</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".64">2</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value=".96">3</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="audioStream" value="1.28">4+</label>
</div>
</div>
<div class="form-group">
<label for="generalUse" class="col-xs-12 control-label text-left">Number of people who use the Internet for general use (shopping, banking, e-mail, social media, etc.) on your network</label>
<div class="col-xs-12 btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="0" checked>0</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value=".5">1</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="1">2</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="1.5">3</label>
<label class="btn btn-primary"><input class="BroadbandRadioClass" type="radio" name="generalUse" value="2">4+</label>
</div>
</div>
<div class="form-group">
<div id="CalculationResult" class="col-sm-8 col-sm-offset-4">
</div>
</div>
</form>
<!-- END CONTACT FORM -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- / FOOTER -->
我首先使用了以下代码，除非包含Bootstrap脚本，否则它可以正常工作。然后就打破了。我知道这是因为Bootstrap处理表单的方式。
$("input[type=radio]").click(function() {
var Broadbandtotal = 0;
$("input[type=radio]:checked").each(function() {
Broadbandtotal += parseFloat($(this).val());
});
$( "#CalculationResult" ).html( "You need at least " + Broadbandtotal );
console.log(Broadbandtotal);
});
这很好，除了我想使用Bootstrap。所以我替换了一些东西并最终得到了这个：
$(".btn").click(function() {
var Broadbandtotal = 0;
$(" .active input:radio").each(function() {
Broadbandtotal += parseFloat($(this).val());
});
$( "#CalculationResult" ).html( "You need at least " + Broadbandtotal );
console.log(Broadbandtotal);
});
这实际上有效，但有一个非常奇怪的怪癖。您必须单击2个按钮才能显示底部显示的数字（即单击按钮1，它会告诉您答案为“0” - 单击按钮2，它会告诉您答案为“1”，这实际上是您应该的点击第一个按钮即可获得。）
我在这里遗漏了什么吗？它似乎应该与第一个代码运行相同，这没有任何问题。似乎它在某些代码运行后以某种方式添加变量，但我无法弄清楚这一点。控制台也说了同样的话。绝望需要提示！感谢...
答案 0 :(得分：1)
我将您的点击事件都变成了一个更改事件：
$("input[type=radio]").on('change',function() {
var Broadbandtotal = 0;
$("input[type=radio]:checked").each(function() {
Broadbandtotal += parseFloat($(this).val());
});
$( "#CalculationResult" ).html( "You need at least " + Broadbandtotal );
console.log(Broadbandtotal);
$(" .active input:radio").each(function() {
Broadbandtotal += parseFloat($(this).val());
});
});