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

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> 

Does anyone know how to output the price when clicking the radio button ? Let say if i choose Small then it will display the output Rm2...for example Price = Rm 2....i have no idea how to continue it...i will very appreciate it if someone help me solve this...thanks ~

Answer 1

You can pass as parameter this in calculate function(this refers to the element).

Using 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> 

Using plain 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

Try it

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
});