通过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/ （进行了一些其他修改）