作爲圖像的單選按鈕，已選中或未選中狀態（jquery）

我對jquery很新，我一直在尋找幾個小時試圖創建單選按鈕作爲圖像 - 用戶可以點擊填寫調查問卷。我不想使用jqueryui，因爲圖像太難以用jquery和css重新創建。作爲圖像的單選按鈕，已選中或未選中狀態（jquery）

10個問題 - 每個問題3個答案。

，我終於找到了這一個似乎最有用的 http://screwdefaultbuttons.com/

我想顯示每個單選按鈕，再加上3個獨立的圖像3個圖像的任何人進行檢查時。

有人可以幫忙嗎？現在只有一張圖片被選中，另一張未選中。

如果有人有不同的解決方案 - 這也會有所幫助！

非常感謝！

來源

2012-07-22 flaming_nonsense

你可以爲每個不同風格的圖像分別設置類，併爲該類添加圖像。

來源

2012-07-22 17:10:31 Rohan

你覺得我可以在插件範圍之外做到嗎？ – 2012-07-22 17:35:00

@flaming_nonsense我這麼認爲，看看screwdefaultbuttons.com建議如何使用CSS風格。 – Rohan 2012-07-22 17:38:45

雖然每個按鈕都是一個單獨的圖像 - 我希望它是另一個圖像，當它檢查會干擾？現在它是'$（ '輸入：無線電'）screwDefaultButtons（{ \t \t檢查：\t 「網址（圖片/ question1_checked.png）」， \t \t選中：\t 「網址（圖片/ question1_unchecked.png）」， \t \t寬度：\t \t 447， \t \t高度：\t \t}）;'但我想一個組 – 2012-07-22 17:44:44

哇這需要一段時間，並在這裏的好朋友的幫助下，我想出了。

我有多組單選按鈕，每組的單選按鈕的名稱相同，每組單選按鈕的ID也不同。

  <input type="radio" class="question" name="question1" id="q1A" value="A" /><label class="answer" for="q1A">Answer1</label> 
      <input type="radio" class="question" name="question1" id="q1B" value="B" /><label class="answer" for="q1B">Answer2</label> 
      <input type="radio" class="question" name="question1" id="q1C" value="C" /><label class="answer" for="q1C">Answer3</label>

然後在我的CSS我創建了一個隱藏的類

.input_hidden { 
position: absolute; 
left: -9999px;

}

設置類標籤的使用適當的形象，懸停等

對於jQuery的隱藏所有單選按鈕 - 在文檔加載時執行。

$('.question:radio').addClass('input_hidden');

所以現在只有標籤會顯示而不是單選按鈕。當你點擊圖形時，單選按鈕將被選中。

來源

2012-07-25 01:07:12

也可以用圖像，而不是文本中單獨處理每個單選按鈕（標註了CSS）但是如果每個單選按鈕有不同的圖像 - 可能會有所不同。尤其對於已選中和未選中的狀態 – 2012-07-25 01:19:33

作爲圖像的單選按鈕，已選中或未選中狀態（jquery）

回答

相關問題