0
我目前正在使用「label for」(因此用戶可以輕鬆點擊它,而不是小單選按鈕),用於我的收音機選擇框。我有32個不同的無線電盒,所以我不得不使用循環來運行它。但是我發現它與普通的收音機盒不同,我不能用相同的方式循環播放我的收音機盒。如何獲得我選擇的不同廣播箱的所有價值?謝謝。如何循環使用「label for」方法的單選框的值?
$(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 />
謝謝!這就是我要的。 – Beginner