Question

这是我的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>

这是我的CSS：

.hiddenReturning{
    display:none;
}

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

Answer 1

文本框没有被隐藏，它是包装它的td 将文本框更改为仅隐藏或更改td的样式。

这将隐藏文本框：

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

Answer 2

我认为它现在正在运作。试试这个

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

在这里摆弄http://jsfiddle.net/h_awk/g92ps/

Answer 3

试试这个：

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

<强> JS

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

<强> CSS

#new_id{
display:none;
}

Answer 4

按如下方式更改您的CSS：

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

Answer 5

<input type="text" name="number" id="id" />

用于显示和隐藏

使用javascript

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

使用css

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

使用jQuery

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

使用Javascript隐藏/显示HTML元素

5 个答案: