Updating header based on radio, checkbox and select input text

Question

I have the following form on my page JSBin

Each option on the page has a text associated with it(like option1: R50, where R is the currency) with the total price of the product is on top of the page (R500). I want that price to be updated based on the option text value. Like selecting weight- 30kg should add R50 to the total value at the top and update it and deselecting it should update again. I need to use Javascript take the price from the option text-split the currency from the numerical value-add id to the base price; but I can't figure out how to do it and for all the three option types.

html

<div class="col-sm-4">
  <ul class="list-unstyled">
    <li id="thisIsOriginal">
        <h2>R500</h2>
    </li>
  </ul>
  <div id="product">
   <hr>
   <h3>Available Options</h3>
   <div class="form-group required">
       <label class="control-label">Radio</label>
       <div id="input-option218">
           <div class="radio">
               <label>
                   <input type="radio" name="option[218]" value="5">
                  Small (+R12)
               </label>
           </div>
           <div class="radio">
              <label>
                 <input type="radio" name="option[218]" value="6">
                 Medium (+R45)
              </label>
           </div>
           <div class="radio">
              <label>
                  <input type="radio" name="option[218]" value="7">
                      Large  (+R50)
              </label>
           </div>
       </div>
   </div>


   <div class="form-group required">
          <label class="control-label">Checkbox</label>
              <div id="input-option223">
                  <div class="checkbox">
                      <label>
                          <input type="checkbox" name="option[223][]" value="8">
                              Checkbox 1 (+R50)
                      </label>
                  </div>
                  <div class="checkbox">
                      <label>
                          <input type="checkbox" name="option[223][]" value="9">
                              Checkbox 2   (+R44)
                      </label>
                  </div>
                  <div class="checkbox">
                      <label>
                          <input type="checkbox" name="option[223][]" value="10">
                              Checkbox 3 (+R22)
                      </label>
                  </div>
                  <div class="checkbox">
                      <label>
                          <input type="checkbox" name="option[223][]" value="11">
                              Checkbox 4 (+R65)
                      </label>
                  </div>
              </div>
   </div>                                                                                                        

<div class="form-group required">
      <label class="control-label" for="input-option227">weight</label>
      <select name="option[227]" id="input-option227" class="form-control">
          <option value=""> --- Please Select --- </option>
              <option value="19">30kg (+R50)</option>
              <option value="17">10kg</option>
              <option value="18">20kg (+R24)</option>
     </select>
</div>

Answer 1

You could use jQuery, and change the text like this:

$(".thisIsOriginal h2").text(//new value) 

Now that you know this, you can achieve what you want by doing some basic if/else statements based on a "change" event in your form groups (see Monitoring when a radio button is unchecked)

Answer 2

Here you need to attach onchnage handler on all the controls. I have done for the radio button. You can try similar things for other contols.

http://jsbin.com/garibomohi/1/edit?html,js,output

Hope this helps you out.