可能在無線電輸入中輸入文字輸入嗎？或者更適合語義的解決方案？

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字段中的金額。