javascript单选按钮
我想做一个项目,当我选择“专家”按钮时会显示一个文本框,当我点击“学习者”按钮时不会显示文本框javascript单选按钮,javascript,radio-button,Javascript,Radio Button,我想做一个项目,当我选择“专家”按钮时会显示一个文本框,当我点击“学习者”按钮时不会显示文本框 function toggleContent(showHideDiv, switchTextDiv) { var text = document.getElementById(showHideDiv); var ele = document.getElementById(switchTextDiv); var rad_val=''; for (var i=0; i &l
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
我已经写了这段代码,但无法得到问题。。。请帮忙
<html>
<head>
<script language="javascript">
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < document.text.role.length; i++)
{
if (document.text.role[i].checked)
{
rad_val = document.text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
学习者没有价值,只有学习者1或学习者2
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
试试这个:
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val = '';
var pattern = /\d+/g;
var a=pattern.exec(showHideDiv);
for (var i = 0; i < document.forms[showHideDiv].role.length; i++) {
if (document.forms[showHideDiv].role[i].checked) {
rad_val = document.forms[showHideDiv].role[i].value;
}
}
if (rad_val == 'learner' + a) {
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
您可以这样做:
<script language="javascript">
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
var obj=text.getElementsByTagName("input");
for (var i=0; i < obj.length; i++)
{
if (obj[i].checked)
{
rad_val = obj[i].value;
}
}
if(rad_val.indexOf("learner")!=-1){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
在代码的逻辑和检索表单元素的方式上有一些错误
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
我建议修改整个逻辑,而不是修改代码
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
更好的做法是通过代码绑定click事件,而不是从每个输入标记内联。此外,单击通过键盘选择触发的单选按钮后,您可以确定整个单选组的选定值是单击按钮的值
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
以下是实现相同效果所需的代码:
window.onload = function() {
var oDiv = document.getElementById("div2");
var arrRoleButtons = document.getElementsByName("role");
for (var i = 0; i < arrRoleButtons.length; i++) {
var oCurrentRole = arrRoleButtons[i];
oCurrentRole.onclick = function() {
oDiv.style.display = (this.value === 'learner') ? "block" : "none";
}
}
};
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
.这就是解决方案。感谢@dragon66解决我的问题。
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
我认为这个问题出现了,因为我在td中有输入标签和标签标签。。。但我不知道如何解决这个问题…在每个document.text之前删除文档。所以document.text变成了text。请看这里:谢谢@dragon66。。。问题解决了…你的收音机没能正确地接收信号。应该是Learner嘿。。。我不想删除我的td或标签标签。。。我试图删除它,但后来我需要它为我的项目布局。。。我不能删除那个。。。请告诉我,我应该在javascript中做什么,以同样的方式访问它…不要删除HTML中的任何内容,只需内联onclick即可。而不是您当前的JavaScript代码只有我发布的代码,它应该可以正常工作。。。对他们两个我都想要一样的东西。。。在上面的代码中,它实际上混淆了应该选择哪一个…请将您的整个代码上传到一些免费主机上,比如JSFIDLE或jsbin,然后发布链接,这样我就可以看到了。