Question

我试图隐藏或显示联系表单的电子邮件/电话号码部分，具体取决于用户是选择电话还是电子邮件单选按钮，但我无法弄清楚为什么它对我不起作用。我已经搜索了堆栈溢出＆amp; amp; w3Schools，我很确定我使用了正确的语法，但它仍然不会显示/隐藏，具体取决于单选按钮。任何帮助都将非常感激！

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

#email {
display:none;
}       
#phonenumber {
    display:none;
}

的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"; }
}

Answer 1

由于默认情况下会检查电话号码，因此您最初不应将其隐藏。
您无需点击单选按钮组中的广播来检查checked属性，因为点击始终会选中它。

您可以使用常用功能，如下所示 -

最初将以下给出的课程hide用于发送电子邮件。
调用两个无线电的showHide(this)下面的函数onClick

CSS

.hide {
 display:none;
}

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');
 }
}

Demo

Answer 2

直接在javascript中应用它会更快：

$（＆＃39;＃id-element＆＃39;）。css（＆＃39; display＆＃39;，＆＃39; block＆＃39;）;

$（＆＃39;＃id-element＆＃39;）。css（＆＃39; display＆＃39;，＆＃39; none＆＃39;）;

使用Javascript基于单选按钮显示/隐藏fieldset

2 个答案: