How to sum the values on the radio buttons using Javascript?

Question

I have checked the following tutorials:

How might I calculate the sum of radio button values using jQuery?

How to find a total sum of radio button values using jQuery/JavaScript?

How might I calculate the sum of radio button values using jQuery?

However, none of these tutorials helped me with my code.

I have about 100 radio buttons asking various questions. One of the radio buttons asks if the user wants to download a logo; if Yes, the price is $49.99, else it is $0.00. The user must choose either Silver or Gold plan. The price of the chosen plan has to be added to the logo price, and the total displayed.

This is what I have so far :

$(document).ready(function(){

    $('input').iCheck ({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });

    var sum = 0;
    $('input').on("change", function(){
        sum = parseInt($('input[name="groupeight"]:checked').val(),10) + parseInt($('input[name="groupnine"]:checked').val(),10);
        console.log(sum);
        if($('input[name="groupeight"]').is(':checked') && $('input[name="groupnine"]').is(':checked')){
            $('#output').html("$"+sum);
        }
    });

    $(".choice").blur(function(){
        $(this).parseNumber({format:"#,###.00", locale:"us"});
        $(this).formatNumber({format:"#,###.00", locale:"us"});
    });
    $(".plan").blur(function(){
        $(this).parseNumber({format:"#,###.00", locale:"us"});
        $(this).formatNumber({format:"#,###.00",locale:"us"});
    });

});

<div class="input-wrapper">
    <div class="answer"><input class="choice" type="radio" name="groupeight" value="49.99"/>
         <label>Yes</label>
    </div>
    <input class="choice" type="radio" name="groupeight" value="0.00" /><label>No</label><br />
</div>

<div class="plan-wrapper">
    <label id="silver-plan"><input class="plan" type="radio" name="groupnine" value="699" <?php if (!isset($_POST['radio']) || isset($_POST['radio']) && $_POST['radio'] == '699'): ?>checked="checked"<?php endif; ?> /><label>Silver Plan</label><span id="silver-plan-price">$699</span></label>

    <label id="gold-plan"><input class="plan" type="radio" name="groupnine" value="999" <?php if (isset($_POST['radio']) && $_POST['radio'] == '999'): ?>checked="checked"<?php endif; ?>/><label>Gold Plan</label><span id="gold-plan-price">$999</span></label>
</div>

Answer 1

I've created a codepen that should do exactly what you want.

The php has been removed, but it shouldn't be to hard to put back in.

(I also took out a lot of that other JavaScript code like the .iCheck and the .on('blur') 's. I hope they weren't there for a certain reason. I also upgraded your jQuery syntax...)

Answer 2

I suggest you add a data-price attribute to some inputs and then calculate the price as follows:

 function calcPrice() { var price = 0; $("input[type=radio][data-price]:checked").each(function(i, el) { price += +$(el).data("price"); }); $("#price").text(price); } $("input[type=radio]").on("change", calcPrice); calcPrice(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Group 1:</p><ol> <label><li><input type="radio" name="group1" checked>Item 1 (free)</li></label> <label><li><input type="radio" name="group1" data-price="1">Item 2 ($1)</li></label> <label><li><input type="radio" name="group1" data-price="2">Item 3 ($2)</li></label> <label><li><input type="radio" name="group1" data-price="3">Item 4 ($3)</li></label> </ol> <p>Group 2:</p><ol> <label><li><input type="radio" name="group2" data-price="67.89" checked>Another item 1 ($67.89)</li></label> <label><li><input type="radio" name="group2" data-price="0.00">Another item 2 (free)</li></label> <label><li><input type="radio" name="group2" data-price="5.00">Another item 3 ($5)</li></label> <label><li><input type="radio" name="group2" data-price="12.34">Another item 4 ($12.34)</li></label> </ol> <p>Total: $<span id="price">--.--</span></p> 

You can make the query "input[type=radio][data-price]:checked" more specific, if there are several forms on the webpage that may contain radio buttons with a data-price attribute. You can also add information about currency, if that's important to you.

Answer 3

This answer uses a Javascript function to adjust the value of a "score" variable according to which radio buttons are selected.