使用JavaScript隐藏/显示HTML元素
[英]Hide/Show HTML elements using Javascript
问题描述
This is my JS: 
这是我的JS：
function showReturning(){
document.getElementById("returningdate").style.display = 'block';
} }
And this is my HTML: 这是我的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>
And this is my CSS: 这是我的CSS：
.hiddenReturning{
display:none;
}
When I click the radio button, the text box is not being displayed. 当我单击单选按钮时，未显示该文本框。
5 个解决方案
解决方案1
1 2014-05-02 11:35:40
The textbox is not hidden, it's the td that wraps it. 文本框不是隐藏的，而是包装它的td。
Either change the textbox only to be hidden or change the td's style. 将文本框更改为仅隐藏或更改TD的样式。
This will hide the textbox: 这将隐藏文本框：
<td>
<label>Returning:</label>
<input class="hiddenReturning" type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
</td>
解决方案2
0 2014-05-02 11:39:44
i think it is working now. 我认为它现在正在工作。 try this 尝试这个
<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>
fiddle here http://jsfiddle.net/h_awk/g92ps/ 在这里摆弄http://jsfiddle.net/h_awk/g92ps/
解决方案3
0 2014-05-02 11:40:43
try This : 尝试这个 ：
HTML 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 JS
function showReturning()
{
document.getElementById("new_id").style.display = 'block';
}
CSS CSS
#new_id{
display:none;
}
解决方案4
0 2014-05-02 11:42:35
Change your css as follows : 如下更改您的css：
<style type="text/css">
#returningdate{
display:none;
}
</style>
解决方案5
0 2014-05-02 12:12:07
<input type="text" name="number" id="id" />
for show and hide 用于显示和隐藏
using javascript 使用JavaScript
document.getElementById("id").style.display="block";
document.getElementById("id").style.display="none";
using css 使用CSS
#id{
display:block;
display:none;
}
using jQuery 使用jQuery
$('#id').show();
$('#id').hide();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.