locked
running total of check boxes and radio buttons with values RRS feed

  • Question

  • User379720387 posted

    Previously I had many checkboxes and I would find a running total  from data-servtotal with the js below. That works very well.

    .each() would ensure each check is only counted once and an uncheck results in the total to be reduced with data-serval.

    #badgespan would show the total on my page.

    <input type="radio" id="opt1a" name="fservice" data-servval= 10 value="opt1a" /> <label for="opt1a">Option 1a</label><br/>
    <input type="radio" id="opt1b" name="fservice" data-servval= 35 value="opt1b" /> <label for="opt1b">Option 2a</label><br/>
    <input type="radio" id="opt1c" name="fservice" data-servval= 20 value="opt1c" /> <label for="opt1c">Option 3a</label>
    <br/><br/>
    <input type="checkbox" id="opt2" name="faddon1" value="29" data-servval="150"><label for="opt2">Option 2</label><br/>
    <input type="checkbox" id="opt3" name="faddon2" value="30" data-servval="225"><label for="opt3">Option 3</label><br/>
    <input type="checkbox" id="opt4" name="faddon3" value="31" data-servval="315"><label for="opt4">Option 4</label><br/>
    $('input:checkbox').change(function () {
    
            var total1 = 0.00;
            $('input:checkbox:checked').each(function () {
                total1 += isNaN(parseFloat($(this).data("servval"))) ? 0 : parseFloat($(this).data("servval"));
            });
            //$("#badgespan").html('$ ' + total1.toFixed(2));
    
        });

    Now I need to add a radio button group to be included in the running total functionality (as above).

    I can get the value of the radio button but I am stuck tying these two together so I can get the total total.

    Monday, June 11, 2018 4:09 PM

Answers

  • User283571144 posted

    Hi wavemaster,

    According to your description, I suggest you could create a total function which will foreach both checkboxs and radios buttons to get the selected value.

    Mroe details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.9.1.min.js"></script>
        <script>
            $(function () {
                $('input:checkbox').change(function () {
                    Total();
                 });
                $('input:radio').change(function () {
                    Total();
                });
                function Total()
                {
                    var total1 = 0.00;
                    $('input:checkbox:checked').each(function () {
                        total1 += isNaN(parseFloat($(this).data("servval"))) ? 0 : parseFloat($(this).data("servval"));
                    });
                    $('input:radio:checked').each(function () {
                        total1 += isNaN(parseFloat($(this).data("servval"))) ? 0 : parseFloat($(this).data("servval"));
                    });
                    $("#badgespan").html('$ ' + total1.toFixed(2));
                }
            });
        </script>
    </head>
    <body>
        <input type="radio" id="opt1a" name="fservice" data-servval=10 value="opt1a" /> <label for="opt1a">Option 1a</label><br />
        <input type="radio" id="opt1b" name="fservice" data-servval=35 value="opt1b" /> <label for="opt1b">Option 2a</label><br />
        <input type="radio" id="opt1c" name="fservice" data-servval=20 value="opt1c" /> <label for="opt1c">Option 3a</label>
        <br /><br />
        <input type="checkbox" id="opt2" name="faddon1" value="29" data-servval="150"><label for="opt2">Option 2</label><br />
        <input type="checkbox" id="opt3" name="faddon2" value="30" data-servval="225"><label for="opt3">Option 3</label><br />
        <input type="checkbox" id="opt4" name="faddon3" value="31" data-servval="315"><label for="opt4">Option 4</label><br />
        <br />
        <span id="badgespan"></span>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2018 3:17 AM

All replies

  • User283571144 posted

    Hi wavemaster,

    According to your description, I suggest you could create a total function which will foreach both checkboxs and radios buttons to get the selected value.

    Mroe details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.9.1.min.js"></script>
        <script>
            $(function () {
                $('input:checkbox').change(function () {
                    Total();
                 });
                $('input:radio').change(function () {
                    Total();
                });
                function Total()
                {
                    var total1 = 0.00;
                    $('input:checkbox:checked').each(function () {
                        total1 += isNaN(parseFloat($(this).data("servval"))) ? 0 : parseFloat($(this).data("servval"));
                    });
                    $('input:radio:checked').each(function () {
                        total1 += isNaN(parseFloat($(this).data("servval"))) ? 0 : parseFloat($(this).data("servval"));
                    });
                    $("#badgespan").html('$ ' + total1.toFixed(2));
                }
            });
        </script>
    </head>
    <body>
        <input type="radio" id="opt1a" name="fservice" data-servval=10 value="opt1a" /> <label for="opt1a">Option 1a</label><br />
        <input type="radio" id="opt1b" name="fservice" data-servval=35 value="opt1b" /> <label for="opt1b">Option 2a</label><br />
        <input type="radio" id="opt1c" name="fservice" data-servval=20 value="opt1c" /> <label for="opt1c">Option 3a</label>
        <br /><br />
        <input type="checkbox" id="opt2" name="faddon1" value="29" data-servval="150"><label for="opt2">Option 2</label><br />
        <input type="checkbox" id="opt3" name="faddon2" value="30" data-servval="225"><label for="opt3">Option 3</label><br />
        <input type="checkbox" id="opt4" name="faddon3" value="31" data-servval="315"><label for="opt4">Option 4</label><br />
        <br />
        <span id="badgespan"></span>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2018 3:17 AM
  • User379720387 posted

    Thanks, that works excellently!

    Tuesday, June 12, 2018 6:43 PM