Question

Example on JS FIddle.

The question is:

If the first click is on the radio button, it behaves normally; But if the first click is on span text (i.e. aaaa), it can not get the checked radio.

Please tell me why and how I can make it the same.

Answer 1

This code, which happens when the radio button is clicked:

var obj = $(e.target||e.srcElement).parent();
score = obj.find('input:checked').val();

Puts the parent in the obj variable, which is the containing DIV. This contains both of the radio buttons. It then finds the FIRST checked input element in that DIV, which is always the one with the ‘first’ value after it is checked.

You should just get the value of the item which was clicked:

score = $(e.target||e.srcElement).val();

This can be rewritten as

score = $(this).val();

Here’s a working example: http://jsfiddle.net/RPSwD/10/