如何使收音机显示为标题?另外，我如何让收音机决定下一个盒子
How to make a radio appear as the header? Also how do I get the radio to decide the next box?
我一直在努力弄清楚如何选择收音机以显示在标题中。示例：假设我单击巴登-符腾堡州，如何让它在当前表示省的地方说巴登-符腾堡州？
此外，为了进一步前进，当您单击巴登-符腾堡州时，最好在移动到下一个框时将该联邦（省）内的地区作为下一个选项出现。示例：如果您想查找慕尼黑，您应该能够单击巴伐利亚州并转到下一个以慕尼黑为选项的框。
如果有人能分享他们的知识，我将不胜感激！
label {
display: inline-block;
color: black;
padding: 5px;
}
input[type="radio"] {
vertical-align: bottom;
}
.menu-container {
width:100%;
margin: 0 auto;
padding: 0 0;
}
.menu {
width:100%;
font-family: Verdana, Geneva, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 15px;
position: relative;
padding: 0 0 0 4px;
margin: 0;
background-color: white;
}
.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
color: #23255e;
text-decoration: none;
}
.menu a:hover {
color: #23255e;
text-decoration: none;
}
.menu > li {
display: inline-block;
text-align: center;
margin-left: -15px;
border-left: 0px solid rgba(255, 255, 255, 0.11);
box-shadow: -0px 0 0 rgba(0, 0, 0, 0.1);
}
.menu > li > a {
padding:20px 140px;
display: block;
}
.menu > li:hover > a {
color: white;
}
.menu > li:hover {
background-color: #23255e;
}
/* Megadrop width dropdown */
.menu > li > .megadrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:53px;
left: 0px;
width: 70%;
min-height: 100px;
text-align: left;
margin-top:30px;
padding-left: 50px;
padding-top: 5px;
padding-bottom: 10px;
z-index: 99;
overflow: hidden;
border-left: 1px solid #23255e;
border-right: 1px solid #23255e;
border-bottom: 1px solid #23255e;
}
.menu > li:hover .megadrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.menu ul li:hover:after {
color: #23255e;
}
.menu .col {
width: 14.1%;
float: left;
color:white;
margin: 0 0 0 ;
}
.menu .col ul {
padding: 0;
margin: 0;
}
.menu .col ul li {
padding: 0;
list-style: none;
font-size: 11px;
}
.menu .col h3 {
font-size: 16px;
padding: 10px 0;
font-weight: bold;
margin: 5px 0 5px 0;
color: #23255e;
background: white;
}
.menu .col ul li a {
display: block;
padding: 0 0 15px 0;
color: #23255e;
}
.menu .col ul li a:hover {
color: #111;
text-decoration: none;
}
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > ul, .menu > li {
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-outs;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="euprop.css">
</head>
<body>
<div>
<ul class="menu">
<li class="dropdown"><a href="#">Province</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"> <a href="#" class="active">Region</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_16"><input type="radio" name="radio" id="radio_16" />Baden-Baden</label>
</li>
<li><label for="radio_17"><input type="radio" name="radio" id="radio_17" />Freiburg</label>
</li>
<li><label for="radio_18"><input type="radio" name="radio" id="radio_18" />Heidelberg</label>
</li>
<li><label for="radio_19"><input type="radio" name="radio" id="radio_19" />Heilbronn</label>
</li>
<li><label for="radio_20"><input type="radio" name="radio" id="radio_20" />Karlsruhe</label>
</li>
<li><label for="radio_21"><input type="radio" name="radio" id="radio_21" />Mannheim</label>
</li>
</ul>
</div>
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_22"><input type="radio" name="radio" id="radio_22" />Pforzheim</label>
</li>
<li><label for="radio_23"><input type="radio" name="radio" id="radio_23" />Stuttgart</label>
</li>
<li><label for="radio_24"><input type="radio" name="radio" id="radio_24" />Ulm</label>
</ul>
</div>
<div class="col">
<h3>Regions</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Freiburg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Karlsruhe</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Stuttgart</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Tubingen</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">District</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">Municapality</a>
<div class="megadrop">
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>我不是专家，但我想说您可能需要在输入中添加一个"onclick="和一个可能使用.innerHTML将单选按钮中的值推送到标题中的函数，您的标题也需要一个 id，如下所示： <h3 id="provincesAnswer">Provinces</h3>
该函数需要考虑到所有无线电都指向标题，因此您可能需要内联（我相信其他人会有更简单的方法，但正如我所说，我不是专家）。
所以收音机可能看起来像：
<input type="radio" name="radio" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg">Baden-Wurttemberg
所以为了简化我的意思这是脚本：
<script>
function check(provincesValue) {
document.getElementById("provincesAnswer").value=provincesValue;
}
</script>
和你的标题：
<h3 type="text" id="provincesAnswer">Provinces</h3>
和几个单选按钮，例如：
<li><label for="radio_4"><input type="radio" name="provincesValue" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="provincesValue" id="radio_5" onclick="check(this.value)" value="Bavaria" />Bavaria</label>
</li>
希望这有帮助
相关文章：
- 滚动到容器中的下一个元素-几乎到了
- 后焦点更改为IE 11中的地址栏，而不是转移到表单中的下一个控件
- 使用CSS或js，使用动态选择器选择任意li的下一个元素
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- AngularJS&JSON-从Previous&下一个对象
- 使用向下箭头键(与tab键一样）聚焦下一个输入
- 来自文档或下一个静态父级的事件委派
- angularjs移除焦点上的活动类并添加到下一个项目
- 禁用旋转木马中的下一个按钮和上一个按钮
- 当按下一个键时，请多次按下不同的键
- 正在加载下一个帖子
- 构建JS测试，警报窗口重复上一个Q，而不是问下一个Q
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 真正的下一个具有特定类的元素
- 如何使用javascript获取下一个/转发url
- jQuery转盘下一个元素没有滑入
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 按下一个HTML按钮，该按钮使用一个功能在同一个新窗口中打开URL
- 算法:从数组(javascript/angular）中按当前日期获取上一个和下一个事件
- 如何使收音机显示为标题?另外，我如何让收音机决定下一个盒子
