JavaScript和获取单选按钮的价值

Question

I tried to create an online calculation form using javascript, everything is ok except radio buttons. 我尝试使用javascript创建在线计算表格，除单选按钮外，其他一切正常。

Scenario: 场景：

x(select list) =
   item1 - value="11.2"
   item2 - value="7.6"
   item3 - value="7"

y=(input number)

z=(input number)

coverkind=(radio button)
   if 1 selected >> coverkind = z*800
   if 2 selected >> coverkind = ((y/16)+1)*8*z

totalprice= (x*y*z)+(1000*z)+coverkind

my work till now: 到目前为止，我的工作是：

<html>
<head>
    <script type="text/javascript">
     function getselectionPrice() {
     var elt = document.getElementById("selectionone");
     var selectionPrice = elt.options[elt.selectedIndex].value;
     var y = document.getElementById("y").value;
     var z = document.getElementById("z").value;
     var ser = (selectionPrice * y * z);
     var dz = z*1000;

     var coverkind = document.getElementById("cover").value;
     if (coverkind == 'soft') {
         var SizePrice = (z * 800);
     } else {
         var SizePrice = ((y / 16) + 1) * 8 * z;
     }

     var finalPrice =  ser + dz;
     document.getElementById("totalPrice").value = finalPrice;
 }
    </script>
</head>
<body>
    <div>

        <form action="" id="calcform" onsubmit="return false;">
            <div>
                <div>
                    <fieldset>
                        <label>select</label>
                        <select id="selectionone" name='selectionone' onChange="getselectionPrice()">
                            <option value="11.2">1</option>
                            <option value="7.6">2</option>
                            <option value="7">3</option>
                        </select>
                        <br/>
                        <p>y
                            <input type="text" id="y" onchange="getselectionPrice()" />
                        </p>
                        <p>z
                            <input type="text" id="z" onchange="getselectionPrice()" />
                        </p>
                        <label>cover</label>
                        <input type="radio" name="cover" value="hard" />hard
                        <br />
                        <br>
                        <input type="radio" name="cover" value="soft" />soft
                        <br>
                        <br>
                        <br/>The new calculated price:
                        <INPUT type="text" id="totalPrice" Size=8>
                    </fieldset>
                </div>
                <input type='submit' id='submit' value='Submit' onclick="getselectionPrice()" />
            </div>
        </form>
    </div>
    </body>
    </html>

If I remove the coverkind from js, the rest works fine. 如果我从js中删除coverkind，其余的工作正常。 I googled about getting value from radio button and nothing found very relevant to this situation. 我搜寻有关通过单选按钮获取价值的信息，但没有发现与这种情况非常相关的东西。 firebug error panel : 萤火虫错误面板：

TypeError: document.getElementById(...) is null var coverkind = document.getElementById("cover").value; TypeError：document.getElementById（...）为null var coverkind = document.getElementById（“ cover”）。value;

Answer 1

如果可以使用jQuery，则可以在一行中获取选中的单选按钮的值。

var Val = $("input[name=cover]:checked").val();

Answer 2

You can use the output tag if you want or something else for your output. 您可以根据需要使用输出标签，也可以使用其他方式输出。 (a <p> element for example). （例如<p>元素）。 Just make sure you give anything you want to access in your Javascipt an 'id' value. 只需确保在Javascipt中为您要访问的任何内容提供一个“ id”值即可。

You'll need to create a new file and call it something like 'script.js'. 您需要创建一个新文件，并将其命名为“ script.js”。 Google how to include this script in your html document. Google如何将此脚本包含在html文档中。

Some of the things you'll need to use in your script: 您需要在脚本中使用的一些东西：

document.getElementById(str) Returns an object representing an html element with an id of 'str' document.getElementById(str) 返回一个对象，该对象表示id为'str'的html元素

parseFloat(str) Takes a string 'str' and return the float value parseFloat(str) 接受字符串'str'并返回float值

.value This is a read/write property of an input text box object that contains the text value .value 这是包含文本值的输入文本框对象的读/写属性

.checked ..and a property of an input radio button object. .checked ..和输入单选按钮对象的属性。

When you hit a wall refer to the great google ;) Put all that together and you should be on the right track. 当您碰壁时，请参考出色的Google；）将所有内容放在一起，您应该走在正确的轨道上。

Answer 3

Here is the solution of your problem. 这是您的问题的解决方案。

First give a same id to your radio buttons. 首先给您的单选按钮提供相同的ID。 The checked property will tell you whether the element is selected: 选中的属性将告诉您是否选择了元素：

<input type="radio" id="cover" name="cover" value="hard" checked="checked" />hard
<br />
<br>
<input type="radio" id="cover" name="cover" value="soft" />soft

and in JavaScript function, you can get it. 在JavaScript函数中，您可以获得它。

var coverkind = null;
    if (document.getElementById('cover').checked)
   {
    coverkind = document.getElementById('cover').value;
   }
   if (coverkind == 'soft') {
         var SizePrice = (z * 800);
   } else {
         var SizePrice = ((y / 16) + 1) * 8 * z;
   }

JavaScript和获取单选按钮的价值

问题描述

3 个解决方案

解决方案1
1 2016-04-07 17:48:19

解决方案2
0 2015-09-06 06:01:29

解决方案3
0 已采纳 2015-09-07 06:51:26

JavaScript和获取单选按钮的价值

问题描述

3 个解决方案

解决方案1 1 2016-04-07 17:48:19

解决方案2 0 2015-09-06 06:01:29

解决方案3 0 已采纳 2015-09-07 06:51:26

解决方案1
1 2016-04-07 17:48:19

解决方案2
0 2015-09-06 06:01:29

解决方案3
0 已采纳 2015-09-07 06:51:26