更新報頭基於無線電，複選框並選擇輸入文本

Question

我在我的網頁JSBin

在頁面上每個選項上的以下形式具有與其相關聯（如選項1：R50，其中R是貨幣）文本該產品的總價格在頁面頂部（R500）。我希望基於選項文本值更新價格。就像選擇體重 - 30kg應該添加R50到頂部的總值並更新它並取消選擇它應該再次更新。我需要使用Javascript採取選項文本中的價格 - 將貨幣從數值增值ID分攤到基本價格;但我無法弄清楚如何做到這一點，以及所有三種選擇類型。

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

你可以使用jQuery，並改變這樣的文字：

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

現在你知道這一點，你可以達到你想要的東西做一些基於表單組中的「更改」事件的基本if/else語句（請參閱Monitoring when a radio button is unchecked）

Answer 2

在這裏，您需要在所有控件上附加onchnage處理程序。 我已經完成了單選按鈕。你可以爲其他控件嘗試類似的東西。

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

希望這有助於你出去。