使用按鈕作爲現場輸入，而不是下拉菜單/單選按鈕/複選框。

Question

在我的表格中，我有一個有7個可能值的字段。我不想使用下拉菜單或複選框，而想在按鈕上顯示數據，類似於Quirky.com的申請表格 - 特別是「選擇類別」字段（https://www.quirky.com/ideas/new） 。

這是一個jQuery插件？

截圖在這裏：http://i.stack.imgur.com/qwVEX.png

Answer 1

據我所知，沒有爲這個特定功能的特定插件，但是這將是很容易做到與jQuery。只需創建一個字段（文本字段將會正常）以保存要提交的值，然後創建7個按鈕。創建一個簡單的JavaScript函數，根據單擊的按鈕來設置文本字段的值。中提琴！

功能可能是這個樣子：

<script type="text/javascript"> 
function setValue(button){ 
$('#idOfTextBox').val(button.attr('name')); 

$('.classOfButton').removeClass('selected'); 
button.addClass('selected'); 

return false; 
} 
<script> 

編輯：腳本修改 你會發現我從按鈕和它的同胞按鈕添加和刪除類。通過這種方式，您可以確定選擇哪一種。另外，我使用按鈕的「name」屬性作爲它在文本框中的值。

Answer 2

使用標準的HTML表單標籤，然後將它們轉換爲按鈕。這更好，因爲如果禁用了JavaScript，用戶仍然可以使用該表單。這是'優雅的退化'。

如果選項是互斥的，請使用單選按鈕。如果沒有，請使用複選框。

這種技術的代碼可以在http://msdn.microsoft.com/en-us/scriptjunkie/ff756526和http://theodin.co.uk/blog/design/fancy-radio-buttons-jquery.html找到。