javascript 使用Javascript显示/隐藏基于单选按钮的字段集
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24594878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide fieldset based on radio button using Javascript
提问by red_dorian
I'm trying to have the email/phone number section of a contact form hidden or visible depending on whether the user picks the phone or email radio button, but I cannot figure out why it is not working for me. I've searched through stack overflow & w3Schools, and I'm pretty certain I'm using the correct syntax but it will still not show/hide depending on the radio buttons. Any help would be hugely appreciated!
我试图根据用户是选择电话还是电子邮件单选按钮来隐藏或显示联系表单的电子邮件/电话号码部分，但我不知道为什么它对我不起作用。我已经搜索了堆栈溢出和 w3Schools，我很确定我使用的是正确的语法，但它仍然不会根据单选按钮显示/隐藏。任何帮助将不胜感激！
HTML
HTML
<form name="contactForm" id="contactForm" method="post" action="result.php">
<fieldset>
<!-- Client's contact details -->
<legend>Contact Details</legend>
<label for="fullname">Full Name:</label>
<input type="text" name="contact" id="fullname" required>
<label>Preferred contact method:</label>
<input type="radio" name="contact" value="rdoPhone" id="rdoPhone" checked="checked" onclick="cPhone()" >Phone
<input type="radio" name="contact" value="rdoEmail" id="rdoEmail" onclick="cEmail()" >Email
<label for="phonenumber">Phone Number:</label>
<input type="text" name="contact" id="phonenumber">
<label for="email">Email:</label>
<input type="text" name="contact" id="email">
</fieldset>
</form>
CSS
CSS
#email {
display:none;
}
#phonenumber {
display:none;
}
Javascript
Javascript
function cPhone() {
if (document.getElementById("rdoPhone").checked)
{ document.getElementById("phonenumber").style.display = "block"; }
}
function cEmail(){
if (document.getElementById("rdoEmail").checked)
{ document.getElementById("email").style.display = "block"; }
}
回答by T J
- Since phone number is checked by default, you should not hide it initially.
- You don't have to check for the
checkedproperty on click of a radio in a radio button group, because a click will always select it.
- 由于默认情况下会检查电话号码，因此您最初不应隐藏它。
- 您不必
checked在单击单选按钮组中的单选按钮时检查该属性，因为单击将始终选择它。
You can use a common function for this purpose as follows -
您可以为此目的使用通用功能，如下所示 -
- apply the class
hidegiven below initially for the email. - call the function
showHide(this)given belowonClickof both radios
hide最初将下面给出的类应用于电子邮件。- 调用
showHide(this)下面给出onClick的两个收音机的功能
css
css
.hide {
display:none;
}
js
js
function showHide(elm) {
var phone = document.getElementById("phonenumber");
var email = document.getElementById("email")
if(elm.id == 'rdoPhone'){
phone.classList.remove('hide');
email.classList.add('hide');
}
else
{
phone.classList.add('hide');
email.classList.remove('hide');
}
}
回答by Abimelec Chávez Moreno
It is faster to apply it directly in javascript:
直接在javascript中应用它会更快：
$('#id-element').css('display', 'block');
$('#id-element').css('display', 'block');
$('#id-element').css('display', 'none');
$('#id-element').css('display', 'none');
