I need java script for a "sum" function on a multi-select question

Question

I've got a question with 11 response options (multi select).   The idea is that survey respondents will select multiple responses (each one is a product with an associated $ cost) and see a 'real time' total $ amount at the bottom.  Can anyone help?

Answer 1

Try this code:

Total: <span class="mySum"></span>

<script>
$(document).ready(function(){
    SSI_CustomGraphicalCheckbox();
})

function SSI_CustomGraphicalCheckbox() {
    var total = 0;
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        if (SSI_GetValue('[% QuestionName() %]_' + item)) {
            var label = $('label[for="[% QuestionName() %]_' + item + '"]').text();
            total += Number(label.match(/[0-9]+\.?[0-9]*/));
        }
    });
    $('.mySum').text('$' + total.toFixed(2));
}
</script>

You can place that first line anywhere you want on the page.

Comments

It works great!  Only thing left now is formatting it.  I'd like to... 1) bold the $amount,   2) make it larger, and   3) move the label and the summed $amount from the left side, to the right side, such that the summed amount appears beneath the amounts being summed.

I've already managed to change the label,  bold it, and increase its size using simple html in the first line:
<b><font size="4.8" color="">Total Monthly Cost of Equipment:</font></b> <span class="mySum"></span>

---

Adding this script to the page should apply the same amount of padding to the question footer as is applied to the rest of the question:

<script>
$(document).ready(function(){
    var padding = 0;
    var margin = 0;
    
    $('.question_body, .response_body, .response_column, .response_row:first, .input_cell:first').each(function(){
        padding += parseInt($(this).css('padding-left'));
        margin += parseInt($(this).css('margin-left'));
    });
    
    $('.footer').css('padding-left', padding + 'px');
    $('.footer').css('margin-left', margin + 'px');
})
</script>

---

I've been unsuccessful at employing this last bit of code.  Each time I attempt to insert some, or all of it, the sum feature goes away.  
This might be because the response options are not a simple dollar amount - each response is a wide, rectangular image that I've inserted, with a $amount appearing alongside (right) the image.  The inserted jpg image contains a title, image of the equipment, and bulleted list of attributes.  I couldn't get the table to work so I inserted the images as an easy way to make it all look good.  

I've added a bunch of non breaking spaces before the title so now the summed amount appears along the right side, in line with the numbers being summed.  

What I still can't figure out is how to enlarge/bold the summed dollar amount itself.  Any idea?

---

This is the code currently in my footer:

<b><font size="4.8" color="">Total Monthly Cost of Equipment:</font></b> <span class="mySum"></span>

<style>
.mySum {
    font-weight: bold;
    font-size: 18px;
}
</style>

<script>
$(document).ready(function(){
    var padding = 0;
    var margin = 0;
    
    $('.question_body, .response_body, .response_column, .response_row:first, .input_cell:first').each(function(){
        padding += parseInt($(this).css('padding-left'));
        margin += parseInt($(this).css('margin-left'));
    });
    
    $('.footer').css('padding-left', padding + 'px');
    $('.footer').css('margin-left', margin + 'px');
})
</script>

<script>
$(document).ready(function(){
    SSI_CustomGraphicalCheckbox();
})
 
function SSI_CustomGraphicalCheckbox() {
    var total = 0;
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        if (SSI_GetValue('[% QuestionName() %]_' + item)) {
            var label = $('label[for="[% QuestionName() %]_' + item + '"]').text();
            total += Number(label.match(/[0-9]+\.?[0-9]*/));
        }
    });
    $('.mySum').text('$' + total.toFixed(2));
}
</script>

Does that code work for you?