通過jQuery僅選擇一個對象，然后使用表單提交

Question

我正在構建一個小型測驗應用，並且所有選擇都是列表項（li）

在jQuery或javascript中，我將如何允許用戶選擇一個答案（如果需要添加'a'標簽就可以了），然后當他們單擊Submit（可以通過javascript或jquery完成）時，該值與它一起提交。 同樣，當用戶單擊選項時； 我將把jQuery代碼放在哪里操作CSS。

樣例代碼：

<li id="q1" value="1">Option 1</li>
<li id="q2" value="2">Option 2</li>
<li id="q3" value="3">Option 3</li>

提前致謝。 如果我聽起來有些困惑，或者您無法弄清我要說的話，請發表評論，我會盡力澄清。

Answer 1

也許您應該使用（或至少嘗試）

<input type="radio">

以避免所有這些難看的JavaScript混亂。

方法1

<label><input type="radio" name="Question" value="1">Option 1</label><br>
<label><input type="radio" name="Question" value="2">Option 2</label><br>
<label><input type="radio" name="Question" value="3">Option 3</label>

使用：

-webkit-appearance: none;
-moz-appearance: none;

從默認的<input>清除所有樣式，以便您可以在其中應用背景，顏色，邊框或任何您喜歡的樣式。

方法2

<li><label><input type="radio" name="Question" value="1">Option 1</label></li>
<li><label><input type="radio" name="Question" value="2">Option 2</label></li>
<li><label><input type="radio" name="Question" value="3">Option 3</label></li>

input[type=radio]{
    width:0px;
    height:0px;
}

使用此方法，單擊<li>時也會選擇單選按鈕。 另外，您也可以設置<li>樣式！

實時演示： http : //jsfiddle.net/DerekL/CDV7q/ （進行了一些其他修改）