javascript - 选择后隐藏单选按钮并在新 div 中显示所选值
问题描述
在此处输入图像描述一旦用户单击列表中的特定单选按钮,则整个单选按钮列表必须隐藏,并且所选单选按钮值必须显示在新 div 中,如右下角的“尝试演示”按钮所示“ https://collect.chat/ ”网站页面
<p class="chat-message">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>
<label class="container">Course 2
<input type="radio" name="co2"value="course 2">
<span class="checkmark"></span></label>
<label class="container">Course 3
<input type="radio" name="co3"value="course 3">
<span class="checkmark"></span></label>
<label class="container">Course 4
<input type="radio" name="co4"value="course 4">
<span class="checkmark"></span></label>
</p>
<div class="chat self">
<p class="chat-message"><span id="result"></span></p>
</div>
<script>
document.mainForm.onclick = function()
{
var radVal = document.mainForm.rads.value;
result.innerHTML = 'The course i want is'+radVal;
}
</script>
我希望单选按钮一旦选择就必须隐藏,并且选择的值必须显示在单独的 div 中
解决方案
像这样试试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function show(str){
document.getElementById('sh2').style.display = 'none';
document.getElementById('sh1').style.display = 'block';
}
function show2(sign){
document.getElementById('sh2').style.display = 'block';
document.getElementById('sh1').style.display = 'none';
}
</script>
</head>
<body>
<p>
<input type="radio" name="r1" id="e1" onchange="show2()"/> I Am New User
<input type="radio" checked="checked" name="r1" onchange="show(this.value)"/> Existing Member
</p>
<div id="sh1">Hello There !!</div>
<p> </p>
<div id="sh2" style="display:none;">Hey Watz up !!</div>
</body>
</html>
推荐阅读
- c - 将子 pid 设置为 0 但输出其他
- reactjs - 将 create-react-app 与“npm run dev”一起使用
- c# - 嵌套字典上的 Linq
- git - 防止 GIT 自动更改字符编码
- c++ - 无法编译以下代码以访问结构的变体
- javascript - Javascript 使用 onclick 和 geolocation 来检索当前位置
- python - 在地图上使用 pycharts 绘制坐标
- laravel - Laravel 会话超时
- google-apps-script - 如何使用 YouTube 数据 API 和 YouTube 分析报告为品牌帐户中的每个视频获取 YouTube 分析报告
- sql-server - 寻求帮助退出循环