Question

我想有2个单选按钮，默认选项是带有文本标签的标准单选按钮，第二个选项具有输入字段作为标签。 不使用javascript ，如果输入字段获得焦点，我希望选择第二个单选。

html如下所示：

<form method="post" action="/">
    <div class="some_style">
        <input  type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
        <label  for="radio_1">Option 1</label>
    </div>
    <div class="some_style">
        <input  type="radio" name="n2" value="v2" id="radio_2"/>
        <label for="radio_2">
            <input  name="n3" value="v3"/>
        </label>
    </div>
</form>

Answer 1

该标签将无法像这样工作，因为文本输入将重点放在单击上。因此，如果没有JavaScript，您将无法实现我所担心的。

一个窍门：您可以将标签放置在输入文本上方，如果选中此复选框，则将其隐藏。

但是：然后，您将不得不单击两次以使文本输入成为焦点。为了使这对用户合理，例如如果未选中该复选框，则可以隐藏边框，如果选中，则可以显示边框。

#mylabel {
  display: block;
  #background-color: red;
  position: relative;
  width: 200px;
  height: 2em;
  left: 2em;
  top: -2em
}

#radio_2:checked~#mylabel {
  display: none;
}
#radio_2:not(:checked)~#n3 {
  border: none;
}
label {
  cursor: pointer;
}

<form method="post" action="/">
  <div class="some_style">
    <input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
    <label for="radio_1">Option 1</label>
  </div>
  <div class="some_style">
    <input type="radio" name="n1" value="v2" id="radio_2" />
    <input name="n3" value="v3" id="n3" />
    <label for="radio_2" id="mylabel"></label>
  </div>
</form>

输入为单选按钮标签，输入变为焦点时更改选择

1 个答案: