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

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.
Please follow and like us:
Pin Share

2 comments on “Getting Value of Radio Button and CheckBox using jQuery (Cross Browser)

  1. 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
    1. Prithwiraj Bose Post author

      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 Reply

Your email address will not be published. Required fields are marked *