创建一个带有打开可选输入文本字段的单选按钮的 html 表单答案

【问题标题】：Create an html form with a radio button that opens an optional input text field创建一个带有打开可选输入文本字段的单选按钮的 html 表单
【发布时间】：2011-07-20 08:44:19
【问题描述】：

我想编写一个带有打开可选输入文本字段的单选按钮的表单。

例如单选按钮：你有妻子/丈夫吗？如果用户说是，输入字段 dd、mm 和 yyyy 出现（用于妻子/丈夫的生日日、月和年）并且必须为要提交的表单写入正确的值（接受 01 加 12 加 1978，但不接受 1a加上 yy 加上 1945）。

如果用户对问题的回答为“否”，则该字段没有理由出现（没有妻子/丈夫意味着没有妻子/丈夫的生日），并传输默认值 dd、mm、yyyy。

我知道如何使用单选按钮的 onClick 事件上的样式属性使 div 可见，但我不知道如何使输入字段对于是答案是强制性的，对于否答案是可选的（实际上不可见并且将传输默认值）。

【问题讨论】：

您需要带值的不可见字段吗？不清楚的问题...
@Subdigger 是的，他们需要有一个默认值（dd 加 mm 加 yyyy），但这很简单，这不是主要问题。
输入“YES”和可选的“NO”是什么意思。 select 还是 radio 解决了这个问题？
我的意思是当用户说（使用单选按钮）他/她有一个妻子/丈夫时 3 个字段出现，默认值 dd、mm 和 yyyy 并且用户必须输入有效的生日（为他的妻子/丈夫）以获取表格被接受。如果用户说没有，则表示他/她没有妻子/丈夫，并且生日字段没有理由出现，因此它们的默认值 dd、mm 和 yyyy 被传输。
那么我看不出问题（如果你说：我知道如何使 div 的样式可见...）：在发布时只需检查复选框的值 == YES 然后检查日期

标签： forms html

【解决方案1】：

我找到了一种非常简单的方法。

我的代码给那些感兴趣的人：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample</title>

</head>
<body>
<script type="text/javascript">
function aff_div(ladiv) {
  document.getElementById(ladiv).style.display = "inline";
}

function cach_div(ladiv) {
  document.getElementById(ladiv).style.display = "none";
}

function affich_conj() {
  if (document.forms.devis.votconj[0].checked == true) {
    aff_div("ssconj");
  }

  if (document.forms.devis.votconj[1].checked == true) {
    document.getElementById("jj").value = 0;
    document.getElementById("mm").value = 0;
    document.getElementById("aaaa").value = 0;
    cach_div("ssconj");
  }
}
</script>

<form id="devis" name="devis" action="Validation-du-formulaire.php" method="post">

  <label>Do you have a wife/husband ?</label>
  <input type="radio" name="votconj" value="yes" onclick="affich_conj();">yes
  <input type="radio" name="votconj" value="no" checked="checked" onclick="affich_conj();">no

  <div id="ssconj">
    <p>
      <label>Her/his birthdate :</label>
      <select name="jj" id="jj">
        <option value="0" selected="selected">--</option>
        <option value="01">01</option>
        <option value="02">02</option>
      </select>
      <select name="mm" id="mm">
        <option value="0" selected="selected">--</option>
        <option value="01">01</option>
        <option value="02">02</option>
      </select>
      <select name="aaaa" id="aaaa">
        <option value="0" selected="selected">--</option>
        <option value="1993">1970</option>
        <option value="1992">1969</option>
      </select>
    </p>
  </div>

</form>

<script type="text/javascript">
  cach_div("ssconj");
</script>

</body>
</html>

【讨论】：

【解决方案2】：

使用在点击事件后出现的 class="required" 创建一个自定义输入字段。但是，如果您在单击收音机之前输入输入，只需在输入中添加一个类名 required。您可以使用 id="test" 向元素添加新类，如下所示：

$(document).ready(
      function(){
             $('#testRadio').click(function(){
                  $('test').addClass("required");
      });
});

现在验证类名必需的输入元素。

您可以根据需要禁用/启用或显示/隐藏元素！！！

如果您的输入 required 没有通过编写 return false;

完全填满，请禁用提交

【讨论】：

感谢您的回答，但我宁愿避免使用 JQuery。