javascript验证如果选择了收音机然后需要下拉答案

【问题标题】：javascript validation if a radio selected then make a dropdown requiredjavascript验证如果选择了收音机然后需要下拉
【发布时间】：2020-01-09 08:47:58
【问题描述】：

我的表单中有一个包含 3 个元素的单选字段。颜色、袖子、尺码

基于收音机选择，我会显示/隐藏 3 个选择框。选择-颜色类型红色，蓝色，绿色等选择——袖式全袖、半袖、无袖选择 - 尺寸类型小、中、大、特大如果选择了相关收音机之一，如何使选择字段成为必填项例如：如果选择了彩色单选，则下拉颜色类型为必填字段，否则如果选择单选套筒，则选择下拉套筒类型，依此类推。

 <script type="text/javascript">
  function showLayer(layerName)
  {
    document.getElementById(layerName).style.display="block";
  }
  function hideLayer(layerName)
  {

  document.getElementById(layerName).style.display="none";
  }
</script>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1'); hideLayer('hlayer2'); hideLayer('hlayer3');" required>Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2'); hideLayer('hlayer1'); hideLayer('hlayer3');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3'); hideLayer('hlayer2'); hideLayer('hlayer1');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

【问题讨论】：

请分享您的代码
请添加您的代码
我添加了表单代码，@daddygames
请查看代码@Andrew Daly

标签： javascript jquery html

【解决方案1】：

有几种方法可以做到这一点。您可以获取要设置 style.display 属性的 div 的直接子级，并根据需要设置该子级。目前第一个孩子是您的 select 输入，请记住，如果您决定添加更多元素，这可能会在未来造成麻烦。

如果您想要一种更强大的方法，我会在您的 showLayer() 和 hideLayer() 函数中添加另一个参数，表示您想要设置为必需的选择字段的 ID，并直接获取这些元素。

工作示例：

function showLayer(layerName, myField)
  {
    document.getElementById(layerName).style.display="block";
    
    //set the appropriate field as required
    document.getElementById(myField).required = true;
  }
  function hideLayer(layerName, myField)
  {

  document.getElementById(layerName).style.display="none";
  //set fields as not required
  document.getElementById(myField).required = false;
  }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1', 'colortype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer3', 'sizetype');">Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype'); hideLayer('hlayer3', 'sizetype');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3', 'sizetype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

</body>
</html>

请注意，我在您的 HTML 中添加了适当的输入 ID 作为参数

【讨论】：