javascript - 单击单选按钮时如何输出价格？

Question

<fieldset style="width:240 px">
   <legend>Food order</legend>
   <fieldset style="width:240 px">
   <legend>Nasi Lemak</legend>	
   
   <p>
    <input type="radio"  name="j"  value="2"
    onclick="calculate();" />
    <label for='small' class="inlinelabel">
    Small</label>
     (RM2)
   </p>

   <p>
    <input type="radio"  name="j"  value="3"
    onclick="calculate();" />
    <label for='regular' class="inlinelabel">
    Regular</label>
     (RM3)
   </p>

   <p>
    <input type="radio" name="j"   value="4"
    onclick="calculate();" />
    <label for='large' class="inlinelabel">
    Large</label>
     (RM4)
   </p>



   <tr>
    <td>Price = </td>
    <td><output type="number" name="price" id="output"></output></td>
   </tr>
 

   </fieldset>





<script type="text/javascript">
            calculate()
{

}
      

</script>

有谁知道点击单选按钮时如何输出价格？假设如果我选择 Small 那么它会显示输出 Rm2...例如 Price = Rm 2...我不知道如何继续...如果有人帮助我解决这个问题我将非常感激.. .谢谢~

Answer 1

您可以在计算函数中将 this 作为参数传递(this 指的是元素)。

使用jquery:

function calculate(obj) {
  $("output").text(obj.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset style="width:240 px">
  <legend>Food order</legend>
  <fieldset style="width:240 px">
    <legend>Nasi Lemak</legend>

    <p>
      <input type="radio" name="j" value="2" onclick="calculate(this);" />
      <label for='small' class="inlinelabel">
        Small</label>
      (RM2)
    </p>

    <p>
      <input type="radio" name="j" value="3" onclick="calculate(this);" />
      <label for='regular' class="inlinelabel">
        Regular</label>
      (RM3)
    </p>

    <p>
      <input type="radio" name="j" value="4" onclick="calculate(this);" />
      <label for='large' class="inlinelabel">
        Large</label>
      (RM4)
    </p>



    <tr>
      <td>Price =</td>
      <td>
        <output type="number" name="price" id="output"></output>
      </td>
    </tr>


  </fieldset>

使用普通的js:

function calculate(obj) {
  document.getElementById("output").innerHTML = obj.value;
}

<fieldset style="width:240 px">
  <legend>Food order</legend>
  <fieldset style="width:240 px">
    <legend>Nasi Lemak</legend>

    <p>
      <input type="radio" name="j" value="2" onclick="calculate(this);" />
      <label for='small' class="inlinelabel">
        Small</label>
      (RM2)
    </p>

    <p>
      <input type="radio" name="j" value="3" onclick="calculate(this);" />
      <label for='regular' class="inlinelabel">
        Regular</label>
      (RM3)
    </p>

    <p>
      <input type="radio" name="j" value="4" onclick="calculate(this);" />
      <label for='large' class="inlinelabel">
        Large</label>
      (RM4)
    </p>



    <tr>
      <td>Price =</td>
      <td>
        <output type="number" name="price" id="output"></output>
      </td>
    </tr>


  </fieldset>