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

希望这可以帮助你。

根据收音机，复选框和选择输入文本更新标题

2 个答案: