Select only one object via jQuery and submit it using the form

Question

I am creating a small quiz application and it lists all the list items (li)

In jQuery or javascript, how can I let the user select one answer (this is normal if I need to add the “a” tag), and then when they click the “Send” button (which can be done through javascript or jquery) the value is transmitted together with him. Also when the user clicks an option; where I would put jquery code to control css.

Code example:

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

Thanks in advance. If I am a little confused or you cannot understand what I'm trying to say, please comment and I will try to clarify.

Answer 1

Perhaps you should use (or at least try)

 <input type="radio"> 

to avoid all those ugly JavaScript errors.

Method 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> 

Using:

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

To clear the default all <input> style so that you can apply the background, color, borders, or whatever you like there.

Method 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; } 

Using this method, a switch will also be selected when you click on <li> . Alternatively, you can create your own <li> style too!

LIVE DEMO: http://jsfiddle.net/DerekL/CDV7q/ (with some additional changes)