title: jquery adding and subtracting values while clicking on radio buttons
body: <p>I am trying to add and subtract values when the user clicks on the radio button. All the radio buttons are dynamically created from database values. </p>
  
  <p>There maybe multiple categories inside one heading but user will be able to choose only one. I am stuck in subtracting the value when the user selects another option.</p>
  
  <p>If you are kind enough ;), you can check this pasting in your editor (oh yeah.. I am a total newbie when it comes to programming.)</p>
  
  <p>Any solution or different approach will be much much much appreciated.</p>
  
  <p>Thanks...</p>
  
  <p>Code</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  .active {
   background: #ccc;
  }
  .program {
   border:1px solid blue;
  }
  .program td, .program th {
   padding:10px;
   border:1px solid grey;
  }
  .grandTotal {
   width:200px;
   height:35px;
   font-size:18px;
   font-weight:bold;
   text-align:center;
   line-height:35px;
   background-color:#999;
   margin-top:35px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="program-box"&gt;
    &lt;span&gt;You can select or deselect the radio button&lt;/span&gt;
    &lt;h2&gt;Heading1&lt;/h2&gt;
    &lt;table class="program" cellpadding="0" cellspacing="1"&gt;
      &lt;tr&gt;
        &lt;th class="w-5"&gt;&lt;/th&gt;
        &lt;th class="w-35"&gt;Name&lt;/th&gt;
        &lt;th class="w-30"&gt;Location&lt;/th&gt;
        &lt;th class="w-10"&gt;#days&lt;/th&gt;
        &lt;th class="w-10"&gt;Price&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input name=cat1 value=3 id=3 type='radio' class='v'/&gt;&lt;/td&gt;
        &lt;td&gt;categeory 1&lt;/td&gt;
        &lt;td&gt;location1&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td class="price1"&gt;100&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;h2&gt;Heading2&lt;/h2&gt;
    &lt;table class="program" cellpadding="0" cellspacing="1"&gt;
      &lt;tr&gt;
        &lt;th class="w-5"&gt;&lt;/th&gt;
        &lt;th class="w-35"&gt;Name&lt;/th&gt;
        &lt;th class="w-30"&gt;Location&lt;/th&gt;
        &lt;th class="w-10"&gt;#days&lt;/th&gt;
        &lt;th class="w-10"&gt;Price&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input name=cat2 value=1 id=1 type='radio' class='v'/&gt;&lt;/td&gt;
        &lt;td&gt;category2&lt;/td&gt;
        &lt;td&gt;location2&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td class="price1"&gt;200&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input name=cat2 value=2 id=2 type='radio' class='v'/&gt;&lt;/td&gt;
        &lt;td&gt;category2&lt;/td&gt;
        &lt;td&gt;location3&lt;/td&gt;
        &lt;td&gt;8&lt;/td&gt;
        &lt;td class="price1"&gt;150&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;div class="price"&gt;
      &lt;div class="grandTotal"&gt;1800&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
  
    $("input[type='radio']").mousedown(function(e) {
                  if ($(this).attr("checked") == true) {
  
                     setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);
         }
                  else {
                      return true
                  }
              });
  
  
  });
  
   $(".v").click(function() {
  
  
    $(this).toggleClass("active");
  
  
    $(this).closest('.program').find('.v').not(this).removeClass('active');
  
  
    var actPrice = 1800; // default 1800
    actPrice = parseInt(actPrice); // convert this to integer
  
  
    var isSet = $(this).hasClass("active");
  
  
    var grandTotal=$(".grandTotal").text();
  
    if (grandTotal=="")
    {
     //alert('no total till now');
     var grandTotal=0;
    } else {
     grandTotal=parseInt(grandTotal);
     //alert(grandTotal);
    }
  
  
    var div=parseInt($(this).closest('tr').find(".price1").text());
  
    if(isSet)
    {
     if(grandTotal&gt;0){
      var total = grandTotal+div;
     } else {
      var total = actPrice+div;
     }
     //alert(total);
     $(".grandTotal").html(total);
    } else 
    {
     var div2 = parseInt($(this).closest('tr').find(".price1").text());
     var newTotal = grandTotal-div2;
     $(".grandTotal").html(newTotal);
  
    }
  
  
   });
  
  
  &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>