javascript - 如何使用输入单选显示输入文本?
问题描述
您好,我尝试显示带有无线电输入的输入,不幸的是我不明白为什么它不起作用.. 使用此代码,当我单击“否”时,它会显示正确的输入,但是当我单击“是”时,什么也没有被展示。我不明白为什么谢谢。
<div class="login_content_form">
<%= f.label :post_author_yes, 'Yes' %>
<%= f.radio_button :author, 'Yes', class: 'edit_input', onclick:'javascript:yesnoCheck();' %>
<%= f.label :post_author_no, 'No' %>
<%= f.radio_button :author, 'No', class: 'edit_input', onclick:'javascript:yesnoCheck();' %>
<div id="ifYes" style="display:none">
<%= f.text_field :author, class: 'edit_input', placeholder: 'Real Author' %>
</div>
<div id="ifNo" style="display:none">
<%= f.text_field :author, class: 'edit_input', value: 'Unknown', :readonly => true %>
</div>
</div>
和脚本:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('post_author_yes').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifNo').style.display = 'block'
document.getElementById('ifYes').style.display = 'none';
}
</script>
html版本:
<div class="login_content_form">
<label for="post_post_author_yes">Yes</label>
<input class="edit_input" onclick="javascript:yesnoCheck();" type="radio" value="Yes" name="post[author]" id="post_author_yes" />
<label for="post_post_author_no">No</label>
<input class="edit_input" onclick="javascript:yesnoCheck();" type="radio" value="No" name="post[author]" id="post_author_no" />
<div id="ifYes" style="display:none">
<input class="edit_input" placeholder="Real Author" type="text" name="post[author]" id="post_author" />
</div>
<div id="ifNo" style="display:none">
<input class="edit_input" value="Unknown" readonly="readonly" type="text" name="post[author]" id="post_author" />
</div>
</div>
谢谢您的帮助 !
解决方案
你的 else 语句没有大括号。因此,您关闭 yes 块显示的最后一条语句始终会执行。纠正这个:
function yesnoCheck(){
if(document.getElementById('post_author_yes').checked)
{
document.getElementById('ifYes').style.display = 'block';
}
else
{
document.getElementById('ifNo').style.display = 'block'
document.getElementById('ifYes').style.display = 'none';
}
}
推荐阅读
- docker - 尝试创建卷时,Docker 卷挂载为空
- powershell - 如何对文件中的字符串进行数字排序
- amazon-web-services - 新的 EC2 c6g.large 实例无法使用新的 gp3 卷启动
- excel - 在新工作表中复制和粘贴行
- elasticsearch - 关于 ES 日期范围和过滤器
- java - 如何防止非并发数据结构/对象的数据丢失?
- c# - 有什么方法可以确保 Event 执行完成?
- cookies - 限制网站上所有 cookie 的最大使用期限或过期时间
- javascript - 如何取消选择 oracle apex 中的导航子菜单?
- asp.net - 有没有办法在使用 jExcel 或 jSpreadsheet 创建的报告中检查和显示数据库中的实时更新数据?