我在一个div上有两个单选按钮是和否。当我选择是时,我想要打印一些文本,说输入软件名称和文本框,以显示可以输入名称的位置。我无法打印文字。但是我能够得到文本框,但它改变了另一个单选按钮的位置。我怎么能这样做?
function doDisplay(radio)
{
switch (radio.value)
{
case "yes":
document.getElementById("Sname").style.display = "inline";
}
}
#radio1 {
position: relative;
width: 300px;
height: 370px;
font-size: 15px;
text-align: center;
margin-top: 70px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 70px;
background: #c03f80;
}
img.resize {
position: relative;
width: 30px;
height: 30px;
margin-top: 100px;
background: #009900;
}
.radioGroup label {
display: inline-block;
text-align: center;
margin: 0 0.2em;
margin-top: 150px;
margin-bottom: 0px;
}
.radioGroup label input[type="radio"] {
position: relative;
margin: 0.5em auto;
}
.card-container {
perspective: 700;
}
a {
color: white;
font-family: segoe UI light;
font-weight: bold;
}
body {
background: #fffff;
}
p {
line-height: 40px;
position: absolute;
top: 10px;
left: 0;
color: white;
font-weight: bold;
font-family: segoe UI light;
font-size: 32px;
font-style: normal;
font-variant: Small Caps;
}
#ss {
font-family: segoe UI light;
font-size: 100px;
margin-top: 30px;
text-align: center;
}
#wholepage {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.hide {
display: none;
}
<html>
<head>
<link href="page1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="ss">Software Installation</div>
<div id="card-container">
<div id="radio1" class="radiogroup">
<p>Have the software name?</p>
<label for="Software"><a>Yes</a><br/>
<input type="radio" name="radio1" value="yes" onClick="doDisplay(this);"style="width: 20px;height: 25px; "/>
<span id="Sname" style="display:none; top-margin:100px;">
<input type="text" />
</span>
</label>
<label for="Software"><a>No</a><br/>
<input type="radio" id="myradio" name="radio1" value="no" style="width: 20px; height: 25px; "/>
</label>
</div>
</body>
</html>