Jqueryを使用して複数のラジオボタンの値を取得する方法

Question

Jqueryを使用して複数のラジオボタンの値を取得したいとします。しかし、今では最初の価値しか得られませんでした。

<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('|'); 
} 

Answer 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/

Answer 2

すっきりソリューションは

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

（明らかにあなたがマップの前に多くのフィルタリングを行うことができます。）

でしょう

これで値のリストが得られます。たとえば、値の一覧を表示します。 .join()など