單擊單選按鈕時如何輸出價格？

Question

<fieldset style="width:240 px"> 
 
    <legend>Food order</legend> 
 
    <fieldset style="width:240 px"> 
 
    <legend>Nasi Lemak</legend> \t 
 
    
 
    <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 ....我不知道如何繼續它...如果有人幫我解決這個問題，我將非常感激。 .thanks〜

Answer 1

您可以通過在計算功能參數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>

Answer 2

試試吧

document.getElementsByName("j").addEventListener("change", function(){ 
     document.getElementById("price").innerHTML = this.value;// Show the value in output element 

     //or 

    var myRadioValue= this.value; //for some calculate 
});