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>

已编辑（尝试此操作）

Bootstrap切换开关值

1 个答案: