JavaScript和获取单选按钮的值

JavaScript and getting the value of radio button

本文关键字：单选按钮 获取 JavaScript      更新时间：2023-09-26

我尝试使用javascript创建一个在线计算表单，除了单选按钮外一切正常。

场景:

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

我的工作至今:

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

如果我从js中删除coverkind，其余的工作正常。我在谷歌上搜索了一下从单选按钮中获取价值，没有发现任何与这种情况相关的东西。Firebug错误面板:

TypeError: document.getElementById(…)为空var coverkind = document.getElementById("cover").value;

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

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

这就是你的问题的解决办法。

首先给你的单选按钮一个相同的id。checked属性将告诉您元素是否被选中:

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

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

如果需要，可以使用output标记或其他内容作为输出。(例如一个<p>元素)。只需确保在javascript中提供任何想要访问的内容和'id'值。

您需要创建一个新文件，并将其命名为'script.js'。谷歌如何在你的html文档中包含这个脚本。

脚本中需要用到的一些东西:

document.getElementById(str) 返回一个表示html的对象id为'str'的元素

parseFloat(str) 接受字符串'str'并返回浮点值

.value 这是一个输入文本框对象的读写属性包含文本值

的

.checked …和一个输入单选按钮对象的属性。

当你碰壁时，参考伟大的谷歌;)把所有这些放在一起，你应该在正确的轨道上。

相关文章：