javascript新手，单选按钮不起作用，不允许使用参数答案

【问题标题】：New to javascript, radio buttons don't work, not allowed to use parametersjavascript新手，单选按钮不起作用，不允许使用参数
【发布时间】：2011-12-04 07:58:35
【问题描述】：

I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click.但是，在查找了一段时间后，我什么都没有，因为有些人告诉我做 document.formName.name.value;有些人告诉我在我的按钮上使用 id，然后使用 document.getElementByID(""); 等。

这是一个项目，我们还没有使用参数，我也不知道如何在 HTML 中实现它们

这是我的代码：

<html>
<head>
    <style type="text/css">
        img{height:200px;}
        body{background-image:url('wood.jpg');}
        span.a1{margin-left:150px; display:inline-block;}
        h2, span, h4, div{font-family:helvetica; color:white;}
        h2 {text-align:center; margin-top:150px;}
        img.display{position:absolute; left:400px; height:300px; }
    </style>
    <script type="text/javascript">
        dex1=0;
        stam1=0;
        str1=0;
        intel1=0;
        agil1=0;
        function counter()
        {
            document.getElementById("dex").innerHTML = dex1;
            document.getElementById("stam").innerHTML = stam1;
            document.getElementById("str").innerHTML = str1;
            document.getElementById("intel").innerHTML = intel1;
            document.getElementById("agil").innerHTML = agil1;
        }
        function classChoice()
        {
            if(document.getElementById('mage').checked)
                {
                    classtype = "<img class='display' src='mage.jpg'>";
                    document.getElementById("mage").innerHTML=classtype;
                }
            else if(document.getElementById('paladin').checked)
                {
                    classtype = "<img class='display' src='paladin.jpg'>";
                    document.getElementById("Paladin").innerHTML=classtype;
                }
            else if(document.getElementById('hunter').checked)
                {
                    classtype = "<img class='display' src='hunter.jpg'>";
                    document.getElementById("hunter").innerHTML=classtype;
                }
            else if(document.getElementById('rogue').checked)
                {
                    classtype = "<img class='display' src='rogue.jpg'>";
                    document.getElementById("rogue").innerHTML=classtype;
                }
        }
    </script>
</head>
<body>
    <h2> Awesome MMO </h2>
    <span class="a1">
        <h4> Dexterity </h4>
        <span onmousedown="dex1++; counter();">
            +
        </span>
        <span id="dex">
        0
        </span>
        <span onmousedown="dex1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Stamina </h4>
        <span onmousedown="stam1++; counter();">
            +
        </span>
        <span id="stam">
        0
        </span>
        <span onmousedown="stam1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Strength </h4>
        <span onmousedown="str1++; counter();">
            +
        </span>
        <span id="str">
        0
        </span>
        <span onmousedown="str1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Intellect </h4>
        <span onmousedown="intel1++; counter();">
            +
        </span>
        <span id="intel">
        0
        </span> 
        <span onmousedown="intel1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Agility </h4>
        <span onmousedown="agil1++; counter();">
            +
        </span>
        <span id="agil">
        0
        </span>
        <span onmousedown="agil1--; counter();">
            -
        </span>
    </span>
            <h2> Class </h2>
            <span class="a1">
            <br />
            <form name="class">
                    <input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" />
                    <input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" />
                    <input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" />
                    <input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" />           
            </form>
            </span>
    <span id="picture">
    </span>
</body>

【问题讨论】：

不要使用== 真的，它几乎总是多余的。
不知道如何使用 jfiddle，因为我的图像很难指向路径
@minitech 在 Javascript 中，您可能想要检查对象是否实际上是布尔值 true，而不是不同的“真实”值。（当然你需要三个等号：if (something === true)。）
@Inerdial：没错。 == true 几乎总是多余的。
虽然有时您可能想检查一个变量是否真的是布尔值 true 而不仅仅是“真实”，但大多数时候您会看到带有 something==true 或 something===true 类型的代码“某事”没有问题，例如element.checked===true。我曾经和一个总是写element.checked==false的人一起工作，尽管团队中的其他人都会说!element.checked。

标签： javascript button radio-button

【解决方案1】：

我认为您可能想为此检查 jQuery - 它肯定会让您的事情变得更容易。

Link to jQuery Home

使用这个库，您可以简化代码 - 这是一个基于您的要求的半完整示例 - 它只查看单选按钮上的点击事件 - 您需要添加一个检查以查看该元素是否已检查：

$('input').click(function () {
    if ($(this).attr('id') == 'mage') {
    //add code here to set the source of your image
    $(myImage).attr('src','path/to/your/chosen/image');
});

您可以重复使用 else if 语句来处理每个案例或编写更优雅的解决方案。学习像 jQuery（或其他如原型或 extjs）这样的库将大大减少您编写 javascript 所花费的时间，并将提高您工作的跨浏览器兼容性

【讨论】：

【解决方案2】：

通过 id 获取单选按钮应该没问题，但是使用 checked 属性来测试它们当前是否被选中：

if(document.getElementById('mage').checked)
{
     classtype = "<img class='display' src='mage.jpg'>";
     document.getElementById("picture").innerHTML=classtype;         
}

当然，您的 html 不会显示 id 为“图片”的元素——您只是没有显示吗？

您还需要更改表单上的名称——让它与单选按钮同名可能会导致问题。假设您要将其更改为“frm”，您可以像这样访问所有单选按钮的集合：

var allRadios = document.getElementsByName("classes");

【讨论】：

对于图片来说，它是占位符代码，我更改了几分钟以向某人展示我正在尝试做的事情，但我忘记在发布之前将其更改回来。对于那个很抱歉。我尝试了检查的属性，但它仍然没有返回任何内容。
document.getElementById('mage').checked 不适合您？还是您尝试了其他方法？
'document.getElementById('mage').checked' 不起作用。我打开了 chrome 调试器，我收到“无法读取已检查的空值”的错误
唯一行不通的方法是，如果您的表单上没有一个 id 为 mage 的元素。你能三重检查没有输入错误吗？你可以和圣骑士一起试试吗？
我用所有四个按钮都试过了，它们似乎没有响应，我仍然得到那个错误。三重检查并发现 Paladin 的大写错误，但其他都很好

【解决方案3】：

事实证明，onmousedown 成功了，所以我不得不双击每个单选按钮，因为我无意中发现愤怒地点击了我的按钮。

【讨论】：

【解决方案4】：

你应该使用 jQuery 的change() 函数，如果你想在选择改变时做一些事情。

$('#myRadioButton').change(function(){

    // Do whatever you want to do with the new value 
    // You get the value with $(this).val()

});

【讨论】：