Getting Value of Radio Button and CheckBox using jQuery (Cross Browser)

Written by Prithwiraj Bose on . Posted in Programming Tips Tricks Tutorials

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.

Tags: , , , , , ,

Trackback from your site.

Prithwiraj Bose

I am an Architect of Distributed Applications of Information Services Industries in TATA Consultancy Services Ltd. I live in Kolkata, India. I love computers, programming, travelling and singing. Photography, spending time with my aquarium, designing a random website, painting, and singing are my favorite pass time. I've recently grown interest in Electronics, IoT and Robotics.

Comments (2)

  • Hello

    |

    Hello! I know this is somewhat off topic but I was wondering
    if you knew where I could locate a captcha plugin for my
    comment form? I’m using the same blog platform as yours and I’m having problems finding one?

    Thanks a lot!

    Reply

    • Prithwiraj Bose

      |

      Go to WordPress Admin >> Plugins >> Add New
      Here you get an option to install new plugins by searching them. Search with keyword ‘captcha’ and you’ll find several plugins. Choose the one which best matches your need and install it.

      Reply

Leave a comment

%d bloggers like this: