Question

两个无线电输入和同一标签下的文本框的正确HTML是什么？下面是我到目前为止的小提琴。我希望用户选择 YES ， NO 或其他。如果选择其他，我想显示隐藏文本框（必须是必填项）。这样做的最佳方式是什么？如果有人可以修复jQuery和HTML，我会非常感激。另外，我的表单上有多个这样的输入，所以我希望代码尽可能通用。提前致谢。

$("input[type='radio']").change(function(){
  if($(this).val()=="other")
    $(this).closest("div").find("input[name=hidden-other]").css('display', 'inline-block');
  else
    $(this).closest("div").find("input[name=hidden-other]").css('display', 'none'); 
});

input.hidden-other{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="during-or-after">During or After Office Hours  *</label>
  <input type="radio" name="during-or-after" value="during" checked>During
  <input class="radio-with-left-margin" type="radio" 
         name="during-or-after" value="after">After
  <input class="radio-with-left-margin" type="radio" 
         name="during-or-after" value="other" >Other
  <input type="text" name="hidden-other" 
         class="hidden-other" id="hidden-other" required>
</div>

Answer 1

你想要这样的东西FIDDLE吗？

<强> HTML

<div id="parent">
  <div style="float: left;">
    <label for="during-or-after">During or After Office Hours *</label>
    <input type="radio" name="during-or-after" value="during" checked>During
    <input class="radio-with-left-margin" type="radio" name="during-or-after" value="after">After
  </div>
  <div style="float: left;">
    <input class="radio-with-left-margin" type="radio" name="during-or-after" value="other">Other
    <br>
    <input type="text" name="hidden-other" class="hidden-other" id="hidden-other" required>
  </div>
</div>

Answer 2

仅限CSS：

＆＃13;

input[type="radio"] + input[type="text"] {
  display: none;
}
input[type="radio"]:checked + input[type="text"] {
  display: inline;
  /* <-----you need to use inline to display it after text "Other" */
}

＆＃13;

<div>
  <label for="during-or-after">During or After Office Hours *</label>
  <input type="radio" name="during-or-after" value="during" checked>During
  <input class="radio-with-left-margin" type="radio" name="during-or-after" value="after">After
  <input class="radio-with-left-margin" type="radio" name="during-or-after" value="other">Other
  <input type="text" name="hidden-other" class="hidden-other" id="hidden-other" required>
</div>

＆＃13;

水平对齐的单选按钮与另一个文本框

2 个答案: