我目前正在使用＆＃34;标签为＆＃34;（因此用户可以轻松点击它而不是小的单选按钮）来选择我的无线电盒。我有32个不同的收音机盒，所以我不得不使用循环来运行它。但我发现它与普通的收音机盒不同，我不能以同样的方式为我的收音机盒循环。如何获得我选择的不同收音机盒的所有价值？谢谢。
$(document).ready(function()
{
$('.allrb').change(valueE);
});
function valueE(e)
{
var newValue = e.target.value;
var $radio = $(e.target);
if ($radio.is('.Rb'))
{
$radio.closest('tr').find('.numFr').val(newValue);
}
}input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #9a929e;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
margin: auto;
}
input[type=radio]:checked + label {
color: #ccc8ce;
background: #675f6b;
margin: auto;
}
label + input[type=radio] + label {
border-left: solid 3px #675f6b;
}
.radio-group {
border: solid 3px #675f6b;
display: inline-block;
margin: 10px;
border-radius: 10px;
overflow: hidden;
font-family: roboto;
}
table
{
margin-top: 20px;
}
#tab td
{
vertical-align:middle;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-hover " id="tab">
<tr id="alertr1" name="v">
<td width="30px">1</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one" name="r1" class="allrb Rb" value="5"><label for="option-one">A</label><input type="radio" id="option-two" name="r1" class="allrb Rb" value="4"><label for="option-two">B</label><input type="radio" id="option-three"
name="r1" class="allrb Rb" value="3"><label for="option-three">C</label><input type="radio" id="option-four" name="r1" class="allrb Rb" value="2"><label for="option-four">D</label><input type="radio" id="option-five" name="r1" class="allrb Rb"
value="1"><label for="option-five">E</label>
</div>
</td>
</tr>
<tr id="alertr2" name="v">
<td width="30px">2</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one2" name="r2" class="allrb Rb" value="5"><label for="option-one2">A</label><input type="radio" id="option-two2" name="r2" class="allrb Rb" value="4"><label for="option-two2">B</label><input type="radio" id="option-three2"
name="r2" class="allrb Rb" value="3"><label for="option-three2">C</label><input type="radio" id="option-four2" name="r2" class="allrb Rb" value="2"><label for="option-four2">D</label><input type="radio" id="option-five2" name="r2" class="allrb Rb"
value="1"><label for="option-five2">E</label>
</div>
</td>
</tr>
<tr id="alertr3" name="v">
<td width="30px">3</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one3" name="r3" class="allrb Rb" value="5"><label for="option-one3">A</label><input type="radio" id="option-two3" name="r3" class="allrb Rb" value="4"><label for="option-two3">B</label><input type="radio" id="option-three3"
name="r3" class="allrb Rb" value="3"><label for="option-three3">C</label><input type="radio" id="option-four3" name="r3" class="allrb Rb" value="2"><label for="option-four3">D</label><input type="radio" id="option-five3" name="r3" class="allrb r1"
value="1"><label for="option-five3">E</label>
</div>
</td>
</tr>
<tr id="alertr4" name="v">
<td width="30px">4</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one4" name="r4" class="allrb Rb" value="5"><label for="option-one4">A</label><input type="radio" id="option-two4" name="r4" class="allrb Rb" value="4"><label for="option-two4">B</label><input type="radio" id="option-three4"
name="r4" class="allrb Rb" value="3"><label for="option-three4">C</label><input type="radio" id="option-four4" name="r4" class="allrb Rb" value="2"><label for="option-four4">D</label><input type="radio" id="option-five4" name="r4" class="allrb Rb"
value="1"><label for="option-five4">E</label>
</div>
</td>
</tr>
<tr id="alertr5" name="v">
<td width="30px">5</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one5" name="r5" class="allrb Rb" value="5"><label for="option-one5">A</label><input type="radio" id="option-two5" name="r5" class="allrb Rb" value="4"><label for="option-two5">B</label><input type="radio" id="option-three5"
name="r5" class="allrb Rb" value="3"><label for="option-three5">C</label><input type="radio" id="option-four5" name="r5" class="allrb Rb" value="2"><label for="option-four5">D</label><input type="radio" id="option-five5" name="r5" class="allrb Rb"
value="1"><label for="option-five5">E</label>
</div>
</td>
</tr>
<tr id="alertr6" name="v">
<td width="30px">6</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one6" name="r6" class="allrb Rb" value="5"><label for="option-one6">A</label><input type="radio" id="option-two6" name="r6" class="allrb Rb" value="4"><label for="option-two6">B</label><input type="radio" id="option-three6"
name="r6" class="allrb Rb" value="3"><label for="option-three6">C</label><input type="radio" id="option-four6" name="r6" class="allrb Rb" value="2"><label for="option-four6">D</label><input type="radio" id="option-five6" name="r6" class="allrb Rb"
value="1"><label for="option-five6">E</label>
</div>
</td>
</tr>
<tr id="alertr7" name="v">
<td width="30px">7</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one7" name="r7" class="allrb Rb" value="5"><label for="option-one7">A</label><input type="radio" id="option-two7" name="r7" class="allrb Rb" value="4"><label for="option-two7">B</label><input type="radio" id="option-three7"
name="r7" class="allrb Rb" value="3"><label for="option-three7">C</label><input type="radio" id="option-four7" name="r7" class="allrb Rb" value="2"><label for="option-four7">D</label><input type="radio" id="option-five7" name="r7" class="allrb Rb"
value="1"><label for="option-five7">E</label>
</div>
</td>
</tr>
<tr id="alertr8" name="v">
<td width="30px">8</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one8" name="r8" class="allrb Rb" value="5"><label for="option-one8">A</label><input type="radio" id="option-two8" name="r8" class="allrb Rb" value="4"><label for="option-two8">B</label><input type="radio" id="option-three8"
name="r8" class="allrb Rb" value="3"><label for="option-three8">C</label><input type="radio" id="option-four8" name="r8" class="allrb Rb" value="2"><label for="option-four8">D</label><input type="radio" id="option-five8" name="r8" class="allrb Rb"
value="1"><label for="option-five8">E</label>
</div>
</td>
</tr>
</table>
<input type="text" class="numTotal" name="numTot" id="numTot" disabled />
答案 0 :(得分：1)
I have iterated loop over the radio button and bind with click even on button. I have added all selected values in array.
$('.allrb').change(valueE);
$('#Click').click(clickme);
var selectedValues = [];
function clickme() {
$.each($('.radio-group input[type=radio]'), function(index, value) {
if ($(this).prop('checked')) {
selectedValues.push($(this).val());
}
});
console.log(selectedValues);
}
function valueE(e) {
var newValue = e.target.value;
var $radio = $(e.target);
if ($radio.is('.Rb')) {
$radio.closest('tr').find('.numFr').val(newValue);
}
}input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #9a929e;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
margin: auto;
}
input[type=radio]:checked + label {
color: #ccc8ce;
background: #675f6b;
margin: auto;
}
label + input[type=radio] + label {
border-left: solid 3px #675f6b;
}
.radio-group {
border: solid 3px #675f6b;
display: inline-block;
margin: 10px;
border-radius: 10px;
overflow: hidden;
font-family: roboto;
}
table
{
margin-top: 20px;
}
#tab td
{
vertical-align:middle;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-hover " id="tab">
<tr id="alertr1" name="v">
<td width="30px">1</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one" name="r1" class="allrb Rb" value="5"><label for="option-one">A</label><input type="radio" id="option-two" name="r1" class="allrb Rb" value="4"><label for="option-two">B</label><input type="radio" id="option-three"
name="r1" class="allrb Rb" value="3"><label for="option-three">C</label><input type="radio" id="option-four" name="r1" class="allrb Rb" value="2"><label for="option-four">D</label><input type="radio" id="option-five" name="r1" class="allrb Rb"
value="1"><label for="option-five">E</label>
</div>
</td>
</tr>
<tr id="alertr2" name="v">
<td width="30px">2</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one2" name="r2" class="allrb Rb" value="5"><label for="option-one2">A</label><input type="radio" id="option-two2" name="r2" class="allrb Rb" value="4"><label for="option-two2">B</label><input type="radio" id="option-three2"
name="r2" class="allrb Rb" value="3"><label for="option-three2">C</label><input type="radio" id="option-four2" name="r2" class="allrb Rb" value="2"><label for="option-four2">D</label><input type="radio" id="option-five2" name="r2" class="allrb Rb"
value="1"><label for="option-five2">E</label>
</div>
</td>
</tr>
<tr id="alertr3" name="v">
<td width="30px">3</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one3" name="r3" class="allrb Rb" value="5"><label for="option-one3">A</label><input type="radio" id="option-two3" name="r3" class="allrb Rb" value="4"><label for="option-two3">B</label><input type="radio" id="option-three3"
name="r3" class="allrb Rb" value="3"><label for="option-three3">C</label><input type="radio" id="option-four3" name="r3" class="allrb Rb" value="2"><label for="option-four3">D</label><input type="radio" id="option-five3" name="r3" class="allrb r1"
value="1"><label for="option-five3">E</label>
</div>
</td>
</tr>
<tr id="alertr4" name="v">
<td width="30px">4</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one4" name="r4" class="allrb Rb" value="5"><label for="option-one4">A</label><input type="radio" id="option-two4" name="r4" class="allrb Rb" value="4"><label for="option-two4">B</label><input type="radio" id="option-three4"
name="r4" class="allrb Rb" value="3"><label for="option-three4">C</label><input type="radio" id="option-four4" name="r4" class="allrb Rb" value="2"><label for="option-four4">D</label><input type="radio" id="option-five4" name="r4" class="allrb Rb"
value="1"><label for="option-five4">E</label>
</div>
</td>
</tr>
<tr id="alertr5" name="v">
<td width="30px">5</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one5" name="r5" class="allrb Rb" value="5"><label for="option-one5">A</label><input type="radio" id="option-two5" name="r5" class="allrb Rb" value="4"><label for="option-two5">B</label><input type="radio" id="option-three5"
name="r5" class="allrb Rb" value="3"><label for="option-three5">C</label><input type="radio" id="option-four5" name="r5" class="allrb Rb" value="2"><label for="option-four5">D</label><input type="radio" id="option-five5" name="r5" class="allrb Rb"
value="1"><label for="option-five5">E</label>
</div>
</td>
</tr>
<tr id="alertr6" name="v">
<td width="30px">6</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one6" name="r6" class="allrb Rb" value="5"><label for="option-one6">A</label><input type="radio" id="option-two6" name="r6" class="allrb Rb" value="4"><label for="option-two6">B</label><input type="radio" id="option-three6"
name="r6" class="allrb Rb" value="3"><label for="option-three6">C</label><input type="radio" id="option-four6" name="r6" class="allrb Rb" value="2"><label for="option-four6">D</label><input type="radio" id="option-five6" name="r6" class="allrb Rb"
value="1"><label for="option-five6">E</label>
</div>
</td>
</tr>
<tr id="alertr7" name="v">
<td width="30px">7</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one7" name="r7" class="allrb Rb" value="5"><label for="option-one7">A</label><input type="radio" id="option-two7" name="r7" class="allrb Rb" value="4"><label for="option-two7">B</label><input type="radio" id="option-three7"
name="r7" class="allrb Rb" value="3"><label for="option-three7">C</label><input type="radio" id="option-four7" name="r7" class="allrb Rb" value="2"><label for="option-four7">D</label><input type="radio" id="option-five7" name="r7" class="allrb Rb"
value="1"><label for="option-five7">E</label>
</div>
</td>
</tr>
<tr id="alertr8" name="v">
<td width="30px">8</td>
<td width="200px">Content</td>
<td width="75px;">
<div class="radio-group">
<input type="radio" id="option-one8" name="r8" class="allrb Rb" value="5"><label for="option-one8">A</label><input type="radio" id="option-two8" name="r8" class="allrb Rb" value="4"><label for="option-two8">B</label><input type="radio" id="option-three8"
name="r8" class="allrb Rb" value="3"><label for="option-three8">C</label><input type="radio" id="option-four8" name="r8" class="allrb Rb" value="2"><label for="option-four8">D</label><input type="radio" id="option-five8" name="r8" class="allrb Rb"
value="1"><label for="option-five8">E</label>
</div>
</td>
</tr>
</table>
<input type="text" class="numTotal" name="numTot" id="numTot" disabled />
<input type="button" value="Click Me and see console for Output" id="Click"/>