基于Radio Button Click的jQuery Autocalculate

Question

I am stuck on the last part of this jQuery auto-calculation script that I am working on. I want to automatically re-calculate the subtotal values based on a "radio button click". The calculation will automatically add a 10% discount when the radio button "special_(n)" gets clicked.

View the script in action here: http://www.ppleasysavings.com/calcscript/index.html (tip): enter a value into the 'qty' field, and the totals will auto calculate.

Here is the HTML 'part'

Yes<input name="special_1" type="radio" value="1" />
No<input name="special_1" type="radio" value="0" />
<input name="total_item_1" type="text" id="total_item_1" style="text-align:right;" value="$0.00" size="7" maxlength="8" readonly="readonly">

Yes<input name="special_2" type="radio" value="1" />
No<input name="special_2" type="radio" value="0" />
<input name="total_item_2" type="text" id="total_item_2" style="text-align:right;" value="$0.00" size="7" maxlength="8" readonly="readonly">

Here is the jQuery

As you can see, I have already added a bit of code to include the special "radio button", and have started on the equation => qty * price * special. Now, I need to modify it so that it works.

var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
    function (){
        // update the plug-in version
        $("#idPluginVersion").text($.Calculation.version);

    // bind the recalc function to the quantity fields
        $("input[name^=qty_item_]").bind("keyup", recalc);
        $("input[name^=special_]").bind("checked", recalc);
        // run the calculation function now
        recalc();
    }
);  
function recalc(){
    $("[id^=total_item]").calc(
        // the equation to use for the calculation
        "qty * price * special",
        // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[name^=qty_item_]"),
            price: $("[id^=price_item_]"),
            special: $("input[name^=special_]")
        },
        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "$" + s.toFixed(2);
        },
        // define the finish callback, this runs after the calculation has been complete
        function ($this){
            // sum the total of the $("[id^=total_item]") selector
            var sum = $this.sum();

            $("#grandTotal").val(
                // round the results to 2 digits
                "$" + sum.toFixed(2)
            );
        }
    );
}

Answer 1

$("input[name^=special_]").change(recalc);

In addition, it seems that your 'special' input item has values of 0 and 1, instead of 0 or .9 (for the 10% off). Set the value of the radio to those values and then use it in your calculation.

EDIT: I kept looking at it and I've decided I'm not a fan of your use of the calculate plugin. Seems to me that it could be accomplished much cleaner with normal functionality. You further complicate your looping and actual calculation like this....