CODEWITHSUNDEEP
jquerycssjquery-mobile
Steven
Steven

Reputation: 63

How to get checked radio buttons value in jQuery mobile?

I have a set of radio button groups. How can I get which is checked yes or now for each group and add them to array?

Here is what I came up so far:

My jquery code:

<script type="text/javascript">
    $(function () {

        $("#getinfo").click(function () {

            $("input[name*=radio-choice-1]:checked").each(function () {
                 alert($(this).val());
            });

        });   

    });       

</script>

and radio buttons

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">        
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
<label for="radio-choice-1">Yes</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">No</label>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">        
<input type="radio" name="radio-choice-3" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Yes</label>
<input type="radio" name="radio-choice-3" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">No</label>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">        
<input type="radio" name="radio-choice-5" id="radio-choice-5" value="choice-5"  />
<label for="radio-choice-5">Yes</label>
<input type="radio" name="radio-choice-5" id="radio-choice-6" value="choice-6" />
<label for="radio-choice-6">No</label>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">        
<input type="radio" name="radio-choice-7" id="radio-choice-7" value="choice-7" />
<label for="radio-choice-7">Yes</label>
<input type="radio" name="radio-choice-7" id="radio-choice-8" value="choice-8" />
<label for="radio-choice-8">No</label>
</fieldset>

<a href="#" id="getinfo">getinfo</a>

Upvotes: 2

Views: 22306

Answers (2)

Jaya Mayu
Jaya Mayu

Reputation: 17247

This will do the work. I'm using the below code in my project. Simple and straight forward as given in the jQuery Mobile documentation.

$("input[type='radio']").bind( "change", function(event, ui) {
        console.log($(this).val());
});

Upvotes: 3

Anthony Grist
Anthony Grist

Reputation: 38345

You're looking for the checked radio button with a name containing the text radio-choice-1 - that's only ever going to be one radio button, because it's the full name. I think what you actually wanted is the checked radio buttons with a name containing the text radio-button-, so just remove the 1 from your selector and it should work.

Working DEMO

Upvotes: 6

Related Questions