可以在无线电输入中输入文本吗？或者更加语义上合适的解决方案？

Question

我有一个需要接受输入的单选按钮（表示'其他'时）：

在语义和易用性方面，最好的方法是什么？如果我不需要，我真的不想采用所有其他无线电的功能。

谢谢！

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字段中查找金额，文本框。