html - 可以在单选输入中放置文本输入吗？还是语义上更合适的解决方案？

Question

我有一个单选按钮需要接受输入(当表示“其他”时):

在语义和易用性方面，最好的方法是什么？如果没有必要，我真的不想使用所有其他 radio 的功能。

谢谢!

Answer 1

很快就把它们组合在一起了。应该让你到达那里的大部分方式:http://codepen.io/chrisdpratt/pen/doBkb

HTML

<ol class="radios">
  <li class="selected">
    <input id="Amount60" type="radio" name="amount" checked="checked" value="60">
    <label for="Amount60">$60</label>
  </li>
  <li>
    <input id="Amount120" type="radio" name="amount" value="120">
    <label for="Amount120">$120</label>
  </li>
  <li>
    <input id="Amount360" type="radio" name="amount" value="360">
    <label for="Amount360">$360</label>
  </li>
  <li>
    <input id="Amount1020" type="radio" name="amount" value="1020">
    <label for="Amount1020">$1020</label>
  </li>
  <li>
    <input id="AmountOther" type="radio" name="amount" value="">
    <label for="AmountOther">Other</label>
    $<input type="text" name="other" placeholder="Enter amount here">
  </li>
</ol>

CSS

body {
  font-size:100%;
  line-height:1.4;
  font-family:heveltica,arial,sans-serif;
}

.radios, .radios li {
  list-style:none;
  margin:0;
  padding:0;
}
.radios li {
  display:inline-block;
  margin-left:10px;
  border:1px solid #222;
  background:#fff;
  color:#222;
}
.radios label
{
  display:inline-block;
  min-width:3em;
  padding:15px;
  text-align:center;
  cursor:pointer;
}
.radios li:first-child {
  margin-left:0;
}
.radios .selected {
  background:#222;
  color:#fff;
}
.radios [type=radio] {
  position:absolute;
  left:-9999px;
  width:0;
  height:0;
}
.radios [type=text] {
  width:8.5em;
  padding:2px;
  margin-right:15px;
  border:0;
  background:transparent;
  color:#222;
  border-bottom:1px solid #222;
}
.radios .selected [type=text] {
  color:#fff;
  border-color:#fff;
}

JS

$(document).ready(function () {
  $('.radios [type=radio]').on('click', function () {
    if ($(this).is(':checked'))
    {
      var $radios = $(this).closest('.radios');
      var $li = $(this).closest('li');
      $radios.find('li').removeClass('selected');
      $li.addClass('selected');

      $li.find('[type=text]').focus();
    }
  })
});

只是为了澄清。基于此设置，如果您看到 amount 的值为空(当选择“Other”单选按钮时它将是空白)，那么您将在 other 字段，您的文本框。