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开发者_JAVA百科 the_value = jQuery('input:radio:checked').attr('id');
alert(the_value);
});
return columns.join('|');
}
$('#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/
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.
精彩评论