Кнопки загрузки Bootstrap - добавление переменных с jquery

Question

Я построил форму, используя 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», что на самом деле является тем, что вы должны нажмите, нажав на первую кнопку.)

Я что-то упустил? Похоже, он должен работать так же, как и первый код, который не имеет проблем. Кажется, что это как-то добавляет переменные вверх после того, как остальная часть кода запустилась, но я не смог это понять. Консоль также говорит то же самое. Подсказки нужны отчаянно! Спасибо ...

Fiddle: https://jsfiddle.net/99x50s2s/234/

Answer 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()); 
    }); 

});