javascript - 简单得令人沮丧 需要 Javascript 帮助

标签 javascript forms show-hide

我正在制作一个表单字段,我想在其中执行简单的显示隐藏操作以在单选按钮上显示 div。

<form id="basic" name="basic">

<label><input name="formelement" type="radio" value="yes" /> Yes   </label>
<label><input name="formelement" type="radio" value="no" /> No </label>

<div id="yes" style="display: none;">
This is the div that displays that shows when 'Yes' is selected.
</div>

<div id="no" style="display: none;">
This is the div that displays that shows when 'No' is selected.
</div>

</form>

我玩过一些在网上找到的各种 JavaScript,但并没有取得很大的成功,因为大多数在线 JavaScript 都设法显示-隐藏一个 div。当选择“否”时隐藏"is",反之亦然是棘手的部分。如果有人可以提供一些帮助,我们将不胜感激!

最佳答案

只需将这些代码粘贴到 head 标签之间即可

<script type="text/javascript">
window.onload=function(){
    var el1 = document.getElementsByName('formelement')[0];
    var el2 = document.getElementsByName('formelement')[1];  
    el1.onchange=function(){
        var show=el1.value;
        var hide=el2.value;
        document.getElementById(show).style.display='block';
        document.getElementById(hide).style.display='none';
    }

    el2.onchange=function(){
        var show=el2.value;
        var hide=el1.value;
        document.getElementById(show).style.display='block';
        document.getElementById(hide).style.display='none';
    }  
}
</script>

DEMO.

关于javascript - 简单得令人沮丧 需要 Javascript 帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11337725/

相关文章:

javascript - AngularJS ui.grid 导出器加载失败

javascript - React 中至少有一个必需的 prop

jquery serializeArray 没有获取 html textarea 和复选框值

javascript - 迭代指定 DIV 标记内的所有表单字段

java - 动态 Jsp 页面 - 花费太长时间

jQuery 隐藏/显示(带有修改的 id 属性的 div)

javascript - jQuery加载动画hide()、show()错误

javascript - 如何为 PhoneGap 应用程序提供两种不同的 UX/UI

android - 单击时如何显示/隐藏操作栏

asp.net - 将 javascript CallBack 函数分配给 UpdatePanel