简体   繁体   中英

Bootstrap toggle switch value

I currently have the following code with my toggle switches for a on and off state. I want to however add values to it to make a calculation and have no clue where to start. In the end there is a form on top, a simple input field where you add a digit (for example 250.000) and when options are on or off, it should make a calculation and place the results in the form below.

<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>

Try with this

<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 (try with this)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM