Javascript 单击单选按钮时，需要切换跨度类的帮助吗_Javascript_Html_Css_Radio Button

Javascript 单击单选按钮时，需要切换跨度类的帮助吗

javascript html css

Javascript 单击单选按钮时，需要切换跨度类的帮助吗,javascript,html,css,radio-button,Javascript,Html,Css,Radio Button,单击其中一个单选按钮时，切换类时出现问题 <html> <head></head> <style type="text/css"> .eHide { display:none; } </style> <script type="text/javascript"> function change() { var NAME = document.getEle

单击其中一个单选按钮时，切换

类时出现问题

<html>
<head></head>
<style type="text/css">
    .eHide
    {
        display:none;
    }
</style>
<script type="text/javascript">
    function change()
    {
        var NAME = document.getElementById("return");
        var currentClass = NAME.className;
        if (currentClass == "eHide") { // Check the current class name
            NAME.className = "";   // Set other class name
        } else {
            NAME.className = "eHide";  // Otherwise, use `second_name`
        }
    }

    function disp()
    {
        document.getElementById("spanfrom").innerHTML = document.getElementById("from").value;
        document.getElementById("spanto").innerHTML = document.getElementById("to").value;
        document.getElementById("spandate").innerHTML = document.getElementById("departure").value;
    }
</script>
<body>
    <div style="width: 1000px">
        <div id="innerWrapper"  style="position:relative;left:50px;top:20px;">
            <div>
                From: <input type="text" id="from" placeholder="Source"/>
                <span style="float:right">To: <input type="text" id="to" placeholder="Destination"/></span>
            </div>
            <div>
                Depart Date: <input type="text" id="departure" placeholder="Departure"/>
                <span style="float:right">Return: <input type="text" id="return" placeholder="Return"/></span>
            </div>

            <div id="control">
                <input type="radio" name="radio" value="oneWayRadio" onClick="change();"> One Way
                <input type="radio" name="radio" value="returnRadio"  checked onClick="change();"> Return
                <button value="Submit" onClick="disp()" type="submit">Submit</button>
            </div>

            <div class="text">You are going from <span id="spanfrom"></span> to  <span id="spanto"></span> on <span id="spandate"></span></div>
        </div>
    </div>
</body>
</html>


埃希德先生
{
显示：无；
}
函数更改（）
{
var NAME=document.getElementById（“返回”）；
var currentClass=NAME.className；
如果（currentClass==“eHide”）{//请检查当前类名
NAME.className=”“；//设置其他类名
}否则{
NAME.className=“eHide”；//否则，请使用“第二个名称”`
}
}
函数disp（）
{
document.getElementById（“spanfrom”）.innerHTML=document.getElementById（“from”）.value；
document.getElementById（“spanto”）.innerHTML=document.getElementById（“to”）.value；
document.getElementById（“spandate”）.innerHTML=document.getElementById（“离开”）.value；
}
发件人：
致：
出发日期：
返回：
单行线
返回
提交
你从现在开始

这是我的全部代码，问题是订票单，有两个单选按钮，“单程”和“返回”。当我单击“单向”时，带有

id=“return”

的

标记应该被隐藏起来，并且正在工作。但它周围包含“返回”一词的跨度并没有被隐藏。您可能会说我可以在

上使用id=“return”，而不是

，但我不应该这样做

我想到的可能解决方案是，在函数change（）中，我使用元素的ID“return”获取元素，是否可以获取范围而不是输入？我不允许使用JQuery。只能使用纯JavaScript。

您可以使用属性，如下所示

var returnSpanElement = document.getElementById("return").parentElement;

明白了

<html>
<head></head>
<style type="text/css">
    .eHide
    {
        display:none;
    }
</style>
<script type="text/javascript">
    function change()
    {
        var NAME = document.getElementById("return").parentNode;
        var currentClass = NAME.className;
        if (currentClass == "eHide") { 
            NAME.className = "";   
        } else {
            NAME.className = "eHide";
        }
    }

    function disp()
    {
        document.getElementById("spanfrom").innerHTML = document.getElementById("from").value;
        document.getElementById("spanto").innerHTML = document.getElementById("to").value;
        document.getElementById("spandate").innerHTML = document.getElementById("departure").value;
    }
</script>
<body>
    <div style="width: 1000px">
        <div id="innerWrapper"  style="position:relative;left:50px;top:20px;">
            <div>
                From: <input type="text" id="from" placeholder="Source"/>
                <span style="float:right">To: <input type="text" id="to" placeholder="Destination"/></span>
            </div>
            <div>
                Depart Date: <input type="text" id="departure" placeholder="Departure"/>
                <span style="float:right">Return: <input type="text" id="return" placeholder="Return"/></span>
            </div>

            <div id="control">
                <input type="radio" name="radio" value="oneWayRadio" onClick="change();"> One Way
                <input type="radio" name="radio" value="returnRadio"  checked onClick="change();"> Return
                <button value="Submit" onClick="disp()" type="submit">Submit</button>
            </div>

            <div class="text">You are going from <span id="spanfrom"></span> to  <span id="spanto"></span> on <span id="spandate"></span></div>
        </div>
    </div>
</body>
</html>


埃希德先生
{
显示：无；
}
函数更改（）
{
var NAME=document.getElementById（“return”）.parentNode；
var currentClass=NAME.className；
如果（currentClass==“eHide”）{
NAME.className=“”；
}否则{
NAME.className=“eHide”；
}
}
函数disp（）
{
document.getElementById（“spanfrom”）.innerHTML=document.getElementById（“from”）.value；
document.getElementById（“spanto”）.innerHTML=document.getElementById（“to”）.value；
document.getElementById（“spandate”）.innerHTML=document.getElementById（“离开”）.value；
}
发件人：
致：
出发日期：
返回：
单行线
返回
提交
你从现在开始

为什么不在整个包装跨度上加上“return”标识<代码>返回：谢谢@Sergey，非常好用。我甚至尝试过使用parentNode，它也可以做同样的工作。