基于单选框更新页眉，选中并选择输入文本

Question

我的页面上有以下表格JSBin

页面上的每个选项都有一个与其相关的文本（如选项1:R50，其中R是货币），产品的总价在页面顶部（R500）。我希望根据选项文本值更新价格。就像选择重量-30公斤应该在顶部的总值中添加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语句来实现您想要的内容（请参阅当单选按钮未选中时进行监控）

Answer 2

这里需要在所有控件上附加onchnage处理程序。我已经为收音机按钮做好了。你可以在其他控件中尝试类似的东西。

http://jsbin.com/garibomohi/1/edit?html，js，输出

希望这能帮到你。