How to get multiple selected radio buttons value using Jquery

Question

I want to get multiple radio buttons value using Jquery. But now could only get the first one's value.

<form action="get" method="post">
                    <table width="100%">
                    <tbody id="checklistwrapper">

                    <tr class="checklisttr" id="1">

                    <td align="left" width="40%"><br>
                    <label for="veryiii" style="align:left;">Within your circle of competence?</label>
                    </td>

                    <td align="center">
                    <label for="veryi" width="12%">Worst</label><br><br>
                    <input type="radio" id="veryi" value="5.0" name="circle">
                    </td>

                    <td align="center" width="12%"><br><br>
                    <input type="radio" id="vii" value="4.5" name="circle">
                    </td>

                    <td align="center" width="12%">
                    <label for="veryiii">Neutral</label><br><br>
                    <input type="radio" id="veryiii" value="3.0" name="circle"> 
                    </td>

                    <td align="center" width="12%"><br><br>
                    <input type="radio" id="viv" value="1.5" name="circle">
                    </td>

                    <td align="center" width="12%">
                    <label for="veryv">Best</label><br><br>
                    <input type="radio" id="veryv" value="1.0" name="circle">
                    </td>
                    </tr>

                    <tr class="checklisttr" id="2">

                    <td align="left" width="40%"><br>
                    <label for="veryiii" style="align:left;">Macro economic environment favorable?</label>
                    </td>

                    <td align="center" width="12%"><br>
                    <input type="radio" id="veryi" value="5.0" name="macro">
                    </td>

                    <td align="center" width="12%"><br>
                    <input type="radio" id="vii" value="4.5" name="macro">
                    </td>

                    <td align="center" width="12%"><br>
                    <input type="radio" id="veryiii" value="3.0" name="macro"> 
                    </td>

                    <td align="center" width="12%"><br>
                    <input type="radio" id="viv" value="1.5" name="macro">
                    </td>

                    <td align="center" width="12%"><br>
                    <input type="radio" id="veryv" value="1.0" name="macro">
                    </td>
                    </tr>

                    </tbody></table>

                    <div style="float:right;margin-top:10px;margin-bottom:5px;">
                        <button type="button" id="savechecklist">Save Checklist</button>
                    </div>

    $('#savechecklist').click(function(){
    var the_value;
    //the_value = jQuery('input:radio:checked').val();
    //the_value = jQuery('input[name=macro]:radio:checked').val();
    the_value = getChecklistItems();
    //alert(the_value);
});

function getChecklistItems() {
    var columns = [];

    $('tr.checklisttr').each(function() {
        //columns.push($(this).('input:radio:checked').val());
        //the_value = $(this).('input:radio:checked').val();
        var the_value = jQuery('input:radio:checked').attr('id');
        alert(the_value);
    });

    return columns.join('|');
}

Solution 1

$('#savechecklist').click(function() {
    var the_value;
    //the_value = jQuery('input:radio:checked').val();
    //the_value = jQuery('input[name=macro]:radio:checked').val();
    the_value = getChecklistItems();
    alert(the_value);
});

function getChecklistItems() {
    var result =
        $("tr.checklisttr > td > input:radio:checked").get();

    var columns = $.map(result, function(element) {
        return $(element).attr("id");
    });

    return columns.join("|");
}

http://jsfiddle.net/btG5L/

Solution 2

Neater solution would be

$('input:radio:checked').map(function(i, el){return $(el).val();}).get();

(obviously you can do more filtering before the map.)

This gives you a list of values, you can then do what you want with it, eg. .join() etc.