开发者

jQuery Autocalculate based on Radio Button Click

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 "speci开发者_StackOverflow中文版al_(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)
            );
        }
    );
}


Try this out to get value of radio button for calculation:

special: $("input[name^=special_]:checked").val(),

but in mycase, only the special_1 radio button will be able to use the click, the next special_2 will not fire anything, still figuring it why.


$("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....

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜