使用Javascript隐藏/显示HTML元素_Javascript_Html_Css

使用Javascript隐藏/显示HTML元素

javascript html css

使用Javascript隐藏/显示HTML元素,javascript,html,css,Javascript,Html,Css,这是我的JS： function showReturning(){ document.getElementById("returningdate").style.display = 'block'; } 这是我的HTML： <input type="radio" name="triptype" value="roundtrip" onclick="showReturning()"/><label>Round Trip</label>

这是我的JS：

function showReturning(){
    document.getElementById("returningdate").style.display = 'block';

}

这是我的HTML：

        <input type="radio" name="triptype" value="roundtrip" onclick="showReturning()"/><label>Round Trip</label>

        <td class="hiddenReturning">
        <label>Returning:</label>
        <input type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
        </td>

单击单选按钮时，文本框不显示。

文本框不隐藏，是td将其包装。
将文本框更改为仅隐藏或更改td的样式。

这将隐藏文本框：

   <td>
        <label>Returning:</label>
        <input class="hiddenReturning" type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
   </td>


返回：

我想它现在正在工作。试试这个

<html>
    <head>
        <script type="text/javascript">

        </script>

        <style type="text/css">
            #returningdate
            {
                display: none;
            }
        </style>
    </head>

    <body>
        <input type="radio" id="radio" />Click<br />

        <td class="hiddenReturning">
            <label>Returning:</label>
            <input type="text" name="returningdate" id="returningdate" />
        </td>

        <script>
            var getback = document.getElementById('returningdate');
            function showReturning()
            {
                getback.style.display = 'block';
            }

            var radio = document.getElementById('radio');

            radio.addEventListener('change', showReturning, false);
        </script>
    </body>
</html>


#返回日期
{
显示：无；
}
单击

返回：
var getback=document.getElementById（'returningdate'）；
函数showReturning（）
{
getback.style.display='block'；
}
var radio=document.getElementById（'radio'）；
radio.addEventListener（'change'，showReturning，false）；

在这里拉小提琴

试试这个：

HTML

<input type="radio" name="triptype" value="roundtrip" onclick="showReturning()"/><label>Round Trip</label>

    <td class="hiddenReturning" id="new_id">
    <label>Returning:</label>
    <input type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
    </td>

CSS

function showReturning()
{
document.getElementById("new_id").style.display = 'block';
}

#new_id{
display:none;
}

按如下方式更改css：

<style type="text/css">
 #returningdate{
  display:none;
 }
</style>


#返回日期{
显示：无；
}

使用css

#id{
    display:block;
    display:none;
    }

使用jQuery

$('#id').show();
$('#id').hide();

如果标记的父级被隐藏，即使标记本身具有display:block，它仍将被隐藏。您还需要取消隐藏父标记。嗨，朋友。。为什么要添加链接标签？为什么要添加style.csssorry，您可以忽略这一点，该文件中没有任何内容，css位于页面本身，答案是否符合您的要求？

document.getElementById("id").style.display="block";
document.getElementById("id").style.display="none";

#id{
    display:block;
    display:none;
    }

$('#id').show();
$('#id').hide();