我可以't获取单选按钮上的onclick属性以执行javascript函数

I can't get the onclick attribute on radio buttons to execute javascript functions

本文关键字：属性 onclick 执行 函数 javascript 单选按钮 获取 我可以      更新时间：2023-12-11

正如我的标题所示，我在使用单选按钮执行javascript函数时遇到了一些困难。如果我选择了一个单选按钮，我很想弹出一个提醒框，但我的代码似乎一直在违背我的"爱"。请帮帮我。

这是我的HTML，不多。

<!DOCTYPE html>
<html>
<head>
    <title>Question One</title>
    <link type = "text/css" rel = "stylesheet" href = "QuestionOne.css">
    <script src = "QuestionOne.js"></script>
</head>
<body>
    <div id = "question">
        <h1>Question One</h1>
        <p>Calculate the area of a circle or a cube</p>
        <form id = "mainForm">
            <fieldset>
                <legend>Choose shape to find area</legend>
                    <label><input type = "radio" name = "shape" value = "Circle" onclick = "checkRadios()" />Circle</label>
                    <br />
                    <label><input type = "radio" name = "shape"  value = "Cube" onclick = "checkRadios()" />Cube</label>
            </fieldset>
        </form>
    </div>
    <div id = "solution">
    </div>
</body>
</html>

这是javascript

var radios = document.getElementsByName("shape");
var len = radios.length;
function checkRadios()
{
    for(int i = 0; i < len; i++)
    {
        if(radios[i].checked)
        {
            alert(radios[i].getAttribute("value") + " selected.");
        }
    }
}

我觉得我需要补充一点，我只是js的初学者，如果帮助不太复杂，我会很感激的。也就是说，我只想要没有任何库（如jquery）的基本javascript，因为这些库目前对我来说太难理解了。

试试这个方法。

JavaScript:

var currentValue = 0;
function checkRadios(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

HTML:

<input type = "radio" name = "shape" value = "Circle" onclick = "checkRadios(this)" />

请参阅单选按钮（INPUT type＝"radio"）的OnChange事件处理程序；t作为一个值工作

您可能希望在带有开发工具（如chrome或firefox）的浏览器中运行。

在for循环上使用var而不是int。

此外，我运行它时len是0。所以你也可以在循环中检查它。

for(var i = 0; i < radios.length; i++)
{
    if(radios[i].checked)
    {
        alert(radios[i].getAttribute("value") + " selected.");
    }
}

另请参阅：

  • http://www.w3schools.com/tags/tag_input.asphttp://www.w3schools.com/tags/ref_eventattributes.asp
相关文章：