JQuery math and radio button sets

In the attached code, I have JQuery calculating price differences for a single set of radio buttons when a particular button is selected, However if I add multiple radio sets, the price differences are calculated based on a click from any of the options sets resulting in incorrect values. The calculation should occur for each set, but remain confined within the set.

The included JQuery grabs a price from a hidden form field within a radio button's label tag. based on the checked radio button, the price difference between the checked option and the others in a  given set is displayed within a <span> tag.

Because the option sets are dynamically created and can change from product to product, the only ID that can be relied on is the one from the <ul> if needed.

Another thing this code should do is display the price differences on page load. Right now the code only calculates when a radio button is checked.

Any help is greatly appreciated. I'm rather new to Javascript and JQuery library.
<html>
<head>
<title>Test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
	// calc option price differences
	$("label input:radio").click(function()
	{
		var _price = $(this).next().val();
		$("label span").remove();
		$("label input:radio").map(function()
		{
			var diff = _price - $(this).next().val();
			if (diff != 0)
			{
				diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
				$(this).parent().append(' <span>' + diff + '</span>');
			}
		});
	});
});
</script>

<style type="text/css" media="screen">
ul { list-style-type: none; }
span { color: blue; }
</style>
</head>
<body>

<ul id="model">
      <li><label for="model1"><input type="radio" id="model1" name="model" value="PART-NO-1" checked="checked" /><input type="hidden" value="100.00" /> Widget 1</label></li>
      <li><label for="model2"><input type="radio" id="model2" name="model" value="PART-NO-2" /><input type="hidden" value="200.00" /> Widget 2</label></li>
      <li><label for="model3"><input type="radio" id="model3" name="model" value="PART-NO-3" /><input type="hidden" value="300.00" /> Widget 3</label></li>
</ul>

<ul id="size">
      <li><label for="size1"><input type="radio" id="size1" name="size" value="PART-NO-4" /><input type="hidden" value="5.00" /> Small</label></li>
      <li><label for="size2"><input type="radio" id="size2" name="size" value="PART-NO-5" /><input type="hidden" value="10.00" /> Medium</label></li>
      <li><label for="size3"><input type="radio" id="size3" name="size" value="PART-NO-6" checked="checked" /><input type="hidden" value="15.00" /> Large</label></li>
</ul>

<ul id="color">
      <li><label for="color1"><input type="radio" id="color1" name="color" value="PART-NO-7" /><input type="hidden" value="10.00" /> Blue</label></li>
      <li><label for="color2"><input type="radio" id="color2" name="color" value="PART-NO-8" checked="checked" /><input type="hidden" value="20.00" /> Red</label></li>
      <li><label for="color3"><input type="radio" id="color3" name="color" value="PART-NO-9" /><input type="hidden" value="30.00" /> Yellow</label></li>
</ul>

</body>
</html>

Open in new window

AnimazeAsked:
Who is Participating?
 
amit_gConnect With a Mentor Commented:
You can fire the click event
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio").click(function()
        {
                var _price = $(this).next().val();
                $("label span", $(this).parent().parent().parent()).remove();
                $("label input:radio", $(this).parent().parent().parent()).map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });

        $("label input:radio:checked").each(function()
        {
        	$(this).click();
        });
});
</script>

Open in new window

0
 
amit_gCommented:
Like this
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio").click(function()
        {
                var _price = $(this).next().val();
                $("label span", $(this).parent().parent().parent()).remove();
                $("label input:radio", $(this).parent().parent().parent()).map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });
});

Open in new window

0
 
AnimazeAuthor Commented:
Thank you, amit_g,

That works perfect.

Would you happen to know how it could also display the price differences on page load based off of the default "checked" radio buttons? RIght now a radio button has to first be checked for the prices to display.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.