Значение переключателя тумблера начальной загрузки

Question

В настоящее время у меня есть следующий код с моими тумблерами для включения и выключения. Я хочу, однако, добавить к нему ценности, чтобы сделать расчет, и не знаю, с чего начать. В конце есть форма сверху, простое поле ввода, где вы добавляете цифру (например, 250 000), и когда параметры включены или выключены, он должен сделать расчет и поместить результаты в форму ниже.

<div class="col-xs-7 col-md-7 pakketright "> 
       <div class="heading"><span>Extra services namaco:</span></div> 
       <form> 
        <div class="formrowitem"><input type="checkbox" value="" name="">Presentatie pakket<br>(Hoogte foto, 360 graden fotografie,<br>Woning slideshow, Plattegronden<br>2-D en 3-D</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script> 
        <div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>         
        <div class="formrowitemodd"><input type="checkbox" value="" name="">Woning video</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff2"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitem"><input type="checkbox" value="" name="">Plattegronden 2-D en 3-D</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitemodd"><input type="checkbox" value="" name="">Stylechange (digitaal restylen van<br>de woning op basis van een foto)</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff2"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitem"><input type="checkbox" value="" name="">Extra promotie op Funda,<br>toppositie of top huis (per maand)</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitemodd"><input type="checkbox" value="" name="">Promolabel (per maand)</div> 
         <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff2"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitem"><input type="checkbox" value="" name="">Digitaal NVM dossier</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitemodd"><input type="checkbox" value="" name="">Woning in beeld in de provincie<br> (per maand)</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff2"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitem"><input type="checkbox" value="" name="">Extra promotie op Facebook</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitemodd"><input type="checkbox" value="" name="">Advertentie in woonmagazine<br>(per plaatsing)</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff2"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div>  
        <div class="formrowitem"><input type="checkbox" value="" name="">Open Huis<br>(Deelname NVM Open huis)</div> 
        <script>$("[name='my-checkbox']").bootstrapSwitch();</script><div class="onoff1"><div class="flipswitch"><input type="checkbox" name="my-checkbox" checked> 
         </div> 
        </div> 
       </form> 
      </div> 

Answer 1

Попробуйте с этим

<form> 
    [...] 
    <div class="onoff2"> 
     <div class="flipswitch"><input type="checkbox" name="my-checkbox" checked></div> 
    </div> 
    [...] 
    <input class="total" type="text" name="total" /> 
</form> 
<script> 
$(document).ready(function(){ 
    $("input[type=checkbox]").bootstrapSwitch(); 
    // add listener on 'change' value to all the input type checkbox placed into .onoff1 and .onoff2 
    $('.onoff2, .onoff1').on('change', 'input[type=checkbox]', function(){ 
     // retrieve values form the total input and the checkbox input 
     var totalValue = $('.total').val(); 
     var checkboxValue = $(this).val(); 

     // calculate on condition if the checkbox is checked 
     if ($(this).is(":checked")) { 
      $('.total').val(totalValue + checkboxValue); 
     } 
     else{ 
      $('.total').val(totalValue - checkboxValue); 
     } 
    }) 
}) 
</script> 

EDITED (попробуйте с этим)