在我的网站上，我使用php来处理联系人/订阅。表单非常简单，有两个单选按钮可以控制用户是想"订阅"还是想"联系"我。在后一种情况下，我希望出现另一个"消息"框。这就是我目前所拥有的：
在contact.php:中
<?php include('form_process.php'); ?>
<html>
<head>
...
...
<div class="blockform">
<h2> Contact/Subscribe </h2>
<div class="container" >
<form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">
<label class="label">
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
value="subscribe"> SUBSCRIBE
<input type="radio" name="gender" style="margin-left:2em"
<?php if (isset($gender) && $gender=="contact") echo "checked";?>
value="contact"> CONTACT
</label>
<label class="label" for="name">Name: *</label>
<fieldset>
<input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
<span class "error"><?= $name_error ?></span>
</fieldset>
<label class="label" for="email">Email address: *</label>
<fieldset>
<input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
<span class "error"><?= $email_error ?></span>
</fieldset>
<label class="label" for="field" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
<fieldset>
<textarea class="w-input input" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>
<button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
<fieldset> </fieldset>
</form>
</div>
</div>
在form_process.php中，我有一个常用的代码来处理单击"提交"按钮时发生的事情。我遇到的问题是，为了使隐藏/显示消息框的代码正常工作，需要考虑单选按钮的实际值来重新加载页面。但是点击单选按钮不会触发任何事情。我尝试添加一个onclickjavascript函数来重新加载页面，但这并没有考虑到我按下的单选按钮的实际值。这似乎是一个容易的问题，但我找不到解决办法
根据KIKO软件的建议，这最终是我的解决方案：
在contact.php中
<label class="label">
<input type="radio" name="gender" onchange="hideMessage()"
<?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
value="subscribe"> SUBSCRIBE
<input type="radio" name="gender" style="margin-left:2em" onchange="hideMessage()"
<?php if (isset($gender) && $gender=="contact") echo "checked";?>
value="contact"> CONTACT
</label>
contact.php:中需要隐藏/显示的元素
<label class="label" for="field" id="messageTag" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
<fieldset>
<textarea class="w-input input" id="messageID" name="message" placeholder="Enter your message" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> value="<?= message ?>" tabindex="3"></textarea>
</fieldset>
在contact.php结束时
<script type="text/javascript">
function hideMessage(){
var radios = document.getElementsByName('gender');
var contactType;
for (var i = 0, length = radios.length; i < length; i++)
{
if (radios[i].checked)
{
// do whatever you want with the checked radio
contactType = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
var x = document.getElementById("messageTag");
var y = document.getElementById("messageID");
if (contactType === "subscribe") {
x.style.display = "none";
y.style.display = "none";
} else {
x.style.display = "block";
y.style.display = "block";
}
}
</script>
纯css，带有:checked，可能还有~选择器
像这样的东西：
input[type=radio][value="subscribe"]:checked~#subscribe {
display: none;
}
input[type=radio][value="contact"]:checked~#subscribe {
display: block;
}
重要提示：#subscribe和radio input应该在同一个父级！
javascript(Jquery(解决方案：
请参阅下面的示例。
<div class="blockform">
<h2> Contact/Subscribe </h2>
<div class="container" >
<form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">
<label class="label">
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
value="subscribe"> SUBSCRIBE
<input type="radio" name="gender" style="margin-left:2em"
<?php if (isset($gender) && $gender=="contact") echo "checked";?>
value="contact"> CONTACT
</label>
<label class="label" for="name">Name: *</label>
<fieldset>
<input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
<span class "error"><?= $name_error ?></span>
</fieldset>
<label class="label" for="email">Email address: *</label>
<fieldset>
<input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
<span class "error"><?= $email_error ?></span>
</fieldset id="messagefields">
<label class="label" for="field"> Message:</label>
<textarea class="w-input input" id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>
<fieldset>
<button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
<fieldset> </fieldset>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function () {
var messagefields = $('#messagefields');
checkRadioBoxes()
function checkRadioBoxes() {
if (this.value === 'subscribe') {
messagefields.hide();
}
else if (this.value === 'contact') {
messagefields.show();
}
}
$('input[type=radio][name=gender]').change(function() {
checkRadioBoxes()
});
})
</script>