Last month I have struggled a lot to read value of checked radio button. The default .val() method doesn’t work in many of the versions of various browsers. I’m feeling to write a very short blog on the cross browser solution.

Suppose following is the html code of your radio button or checkbox.

<div id="container">
Select Gender :
<input id="gender_male" type="radio" name="gender" value="male" /> Male
<input id="gender_female" type="radio" name="gender" value="female" /> Female
Like To Play :
<input id="play_cricket" type="checkbox" name="play" value="cricket" /> Cricket
<input id="play_football" type="checkbox" name="play" value="football" /> Football
<input id="play_tennis" type="checkbox" name="play" value="tennis" /> Tennis
</div>

So when you read the value of the selected radio or checkbox you have to use the following code in jQuery:

var selectedGender = $('#container input:radio[name=gender]:checked').val();
var selectedCheckbox = $('#container input:checkbox[name=play]').val();

Hope this piece of code saves your hours. Please let me know if it helps.