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....
精彩评论