ラジオに基づくヘッダ、チェックボックスを更新し、入力テキスト

Question

を選択私はページ上の各オプションは、（オプション1のように：Rは、通貨であるR50、）それに関連するテキストを有するJSBin

マイページ上で、以下の形態を有します製品の合計金額はページ上部に表示されます（R500）。オプションテキストの値に基づいてその価格を更新したい。体重を30kg選択すると、上部の合計値にR50が追加され、更新されます。選択を解除すると、再び更新されます。私はJavascriptを使用して、オプションテキストから価格を取る必要があります - 通貨を数値加算IDから基本価格に分割します。私はそれを行う方法と3つのオプションのすべてのタイプについて理解できません。あなたはjQueryのを使用しており、このようなテキスト変更することができます

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

：

$(".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

ホープこれはあなたを助けます。