2017-06-12 82 views
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 />

回答

1

我已經迭代循環過的單選按鈕,點擊與甚至在按鈕綁定。 我已經添加了數組中的所有選定值。

$('.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"/>

+0

謝謝!這就是我要的。 – Beginner