使用单选按钮显示/隐藏字段 [英] Display/Hide Fields using radio buttons
问题描述
您好，
我希望能够根据是否选择了
特定的是/否单选按钮来显示或隐藏字段。这与
a一起发布在与复选框相关的同一组中刚刚发布。
谢谢!!!
您可以使用div执行此操作，并根据需要显示和隐藏所选无线电上的div。
我我一直都在做这项工作。
Stu
" DettCom" < SC *** @ dettcom.com>在消息中写道
news：ca ************************** @ posting.google.c om ...您好，
我希望能够根据是否选择了特定的是/否单选按钮来显示或隐藏字段。这与
在与复选框相关的同一组中发布的帖子相结合。
谢谢!!!
在文章< ca ************************** @ posting.google.com>，
sc *** @ dettcom.com （DettCom）写道：
我希望能够根据是否选择了特定的是/否单选按钮来显示或隐藏字段。这与
在与复选框相关的同一组中发布的帖子相结合。
这个javascript应该有帮助。验证非常简单，并且
有很多警报，所以你可以关注正在发生的事情。
罗伯特
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http：//www.w3.org/TR/html4/loose .dtd">
< html>
< head>
< title>单选按钮< / title>
< style type =" text / css">
..formStyle {position：relative;}
< /风格>
< script type =" text / javascript">
功能验证（）
{
var x = document.forms [" myForm"];
var checkedButton;
//找出按下了哪个单选按钮
checkedButton = findValue（x.receiveVia）;
var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;
alert（checkedButton =" + checkedButton +
" varName =" + varName +
" varEmail =" + varEmail +
" varAddress =" + varAddress）;
//我将submitOK更改为布尔变量。
var submitOK = true;
//验证电子邮件：姓名和电子邮件
if（checkedButton ==" byEmail"）
{
alert（ 验证电子邮件字段。;
if（varName ==''''）
{
alert （请填写你的姓名）;
submitOK = false;
}
if（varEmail ==''''）
{
alert（请填写电子邮件）;
submitOK = false;
}
if（varAddress！=''''）
{
alert（" Please erase the address field。）;
submitOK = false;
}
返回submitOK;
}
//验证打印：姓名，电子邮件和地址
else if（checkedButton ==" printed"）
{
alert（" Verifying printed fields&qu ot;）;
//错误信息应该在表格上的顺序
if（varName.length ==''''）
{
提醒（请填写你的姓名）;
submitOK = false;
}
if（varEmail ==''''）
{
alert（请填写电子邮件）;
submitOK = false;
}
if（varAddress ==''''）
{
alert（"你必须输入你的地址）;
submitOK = false;
}
return submitOK;
}
其他
{
提醒（你需要选择电子邮件或打印。）;
返回false;
}
}
函数showHidden（doWhat）
{
//检查getElementById方法是否可用
if（document.getElementById）
{
document.getElementById（" field3"）。style.display = doWhat;
}
else if（document.all）
{
alert（运行旧版本的IE。） ;
document.all.field3.style.display = doWhat;
}
else
{alert（ 无法更改地址字段的可见性;）; }
}
//查看选中的单选按钮并返回其值
function findValue（obj）
{
var i，theValue;
theValue = null;
for（i = 0; i< ; obj.length; i ++）
{
if（obj [i] .checked == true）
{
theValue = obj [i] .value;
休息;
}
}
返回theValue;
}
< / script>
< / head>
< body>
< p>请试用我们的表格。< / p>
< ; form name =" myForm"
action =" http：//www.nonamedomain.com"
method =" POST"
onsubmit =" alert（''submitting''）; return validate（）;">
< p>< input type =" radio"名称= QUOT; receiveVia" value =" printed"
onclick =" showHidden（''''）;">& nbsp; Printed
brochure< / p>
< p>< input type =" radio"名称= QUOT; receiveVia" value =" byEmail"
onclick =" showHidden（''none''）;
document.forms [''myForm'']。theAddress.value = '''';">& nbsp; Via
电子邮件< / p>
< p>名称：< br>
< input type =" text"名称= QUOT; theName" size =" 20">< br>< br>
电子邮件：< br>
< input type =" text"名称= QUOT; theEmail" size =" 20">< br>
< script type =" text / javascript">
//只要我们可以插入一个div改变它
if（document.getElementById || document.all）
{document.write（"< div id =''field3''class ='' formStyle''>"）;}
< / script>
邮政地址：< br>
<输入类型= QUOT;文本"名称= QUOT; theAddress" size =" 40">
< script type =" text / javascript">
if（document.getElementById || document.all）
{document.write（"< / div>"）;}
< / script>
< / p>
< p>< input type =" submit"
border =" 0"
value ="提交表格
width =" 75"
height =" 17"
ALT =" Submit button">< / p>
< / form>
< script type =" text / javascript">
//如果是重新加载，可能已经点击了单选按钮。
//此代码需要在表单之后。
var x = document.forms [" myForm"];
if（x.receiveVia [0] .checked == true）
{showHidden（''''）;}
else if（x.receiveVia [1] .checked == true）
{showHidden（''none''）;}
否则
{;}
< / script>
< / body>
< / html>
Stuart，谢谢你的回复。然而，这就是我一直在尝试带有复选框的
（假设它在理论上是相同的）。以下是我遇到过的简单的
代码：
< input type ="复选框"
onclick = QUOT;如果（的document.all）del.style.display = '' 无 '' " ">
< div id =" del">
您的地址< input type =" text" name =" address">
.....其余的删除字段
< / div>
对于我的生活....我无法弄明白。
Stuart Palmer < TR ********** @ youcant.com>在消息新闻中写道：< 2s ************* @ uni-berlin.de> ...你可以用div做这个并显示和隐藏在所选的收音机上根据需要进行分组。
我一直用我做的工作来做这件事。
Stu
DettCom ; < SC *** @ dettcom.com>在消息中写道
新闻：ca ************************** @ posting.google.c om ...您好，
我希望能够根据是否选择了特定的是/否单选按钮来显示或隐藏字段。这与
在与复选框相关的同一组中发布的帖子相关联。
谢谢!!!
Hello,
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.
Thanks!!!
You can do this with divs and showing and hiding the divs as required based
on the radios selected.
I do this all the time with stuff I do for work.
Stu
"DettCom" <sc***@dettcom.com> wrote in message
news:ca**************************@posting.google.c om...Hello,
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.
Thanks!!!
In article <ca**************************@posting.google.com >,
sc***@dettcom.com (DettCom) wrote:
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.
This javascript should help. The validation is very simple and there
are a lot of alerts so you can follow what is happening.
Robert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radio buttons</title>
<style type="text/css">
..formStyle {position:relative;}
</style>
<script type="text/javascript">
function validate()
{
var x = document.forms["myForm"];
var checkedButton;
// Figure out which radio button was pressed
checkedButton = findValue(x.receiveVia);
var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;
alert("checkedButton = " + checkedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);
// I changed submitOK to a boolean variable.
var submitOK = true;
// Validate email: name and email
if (checkedButton == "byEmail")
{
alert("verifying email fields.");
if (varName == '''')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '''')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '''')
{
alert("Please erase the address field.");
submitOK = false;
}
return submitOK;
}
// Validate print: name, email, and address
else if (checkedButton=="printed")
{
alert("Verifying printed fields");
// Error message should be in the order on the form
if (varName.length == '''')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '''')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '''')
{
alert("You must enter your Address");
submitOK = false;
}
return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}
}
function showHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("field3").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null;
for (i=0;i<obj.length;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}
return theValue;
}
</script>
</head>
<body>
<p>Please try out our form.</p>
<form name="myForm"
action="http://www.nonamedomain.com"
method="POST"
onsubmit="alert(''submitting'');return validate();">
<p><input type="radio" name="receiveVia" value="printed"
onclick="showHidden('''');"> Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden(''none'');
document.forms[''myForm''].theAddress.value = '''';"> Via
Email</p>
<p>Name:<br>
<input type="text" name="theName" size="20"><br><br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getElementById || document.all)
{ document.write("<div id=''field3'' class=''formStyle''>");}
</script>
Postal address:<br>
<input type="text" name="theAddress" size="40">
<script type="text/javascript">
if (document.getElementById || document.all)
{ document.write("</div>");}
</script>
</p>
<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>
</form>
<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden('''');}
else if (x.receiveVia[1].checked == true)
{ showHidden(''none'');}
else
{ ;}
</script>
</body>
</html>
Stuart, thanks for the reply. However, that is what I have been trying
with checkboxes (assume it is the same in theory). Here is the simple
code that i have been experiencing with:
<input type="checkbox"
onclick="if(document.all)del.style.display=''none''" ">
<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>
For the life of me.... I cannot figure it out.
"Stuart Palmer" <tr**********@youcant.com> wrote in message news:<2s*************@uni-berlin.de>...You can do this with divs and showing and hiding the divs as required based
on the radios selected.
I do this all the time with stuff I do for work.
Stu
"DettCom" <sc***@dettcom.com> wrote in message
news:ca**************************@posting.google.c om...Hello,
I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.
Thanks!!!
这篇关于使用单选按钮显示/隐藏字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
