如何獲得2個不同無線電盒的值，並使用loop/each將其設置爲特定位置？

Question

$(document).ready(function() { 
 

 

 
    $('.allrb').change(function() { 
 
    valueE(); 
 
    }); 
 

 
}); 
 

 

 
function valueE() 
 
{ 
 
    for(j=0; j<=2 ; j++) 
 
    { 
 
    var nofr1=[]; 
 
    row=document.getElementsByName("Fr"+j); 
 
     for (i=0; i<row.length; i++) 
 
     { 
 
     if(row[i].checked) 
 
      nofr1[i]= parseInt(row.value); 
 
     } 
 
    $("#numFr"+(j+1)).val(nofr1[j]); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover table-responsive" id="tab"> 
 
<tr id="alertr1" name="v"> 
 
    <td width="200px" id="text">content 1</td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr1" id="numFr1" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr1" id="numIr1" disabled></td> 
 
</tr> 
 

 
<tr id="alertr2" name="v"> 
 
    <td width="200px" id="text">content 2</td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr2" class="allrb" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr2" id="numFr2" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr2" id="numIr2" disabled></td> 
 
</tr> 
 

 
<tr id="alertr3" name="v"> 
 
    <td width="200px" id="text">content 3</td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr3" class="allrb" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3" class="allrb" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3" class="allrb" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3" class="allrb" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3" class="allrb" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3" class="allrb" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr3" id="numFr3" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr3" id="numIr3" disabled></td> 
 
</tr> 
 

 
</tbody> 
 
</table>

成一排，我有2個不同的單選框，怎麼我得到的所有選框的價值，並設置在特定input[type=number]存在的價值？由於我有16行，每行有2個不同的值框，我想用循環將所有的值循環到特定的位置，否則會有很多冗餘代碼。我試圖做到這一點，但我的jQuery不會工作。謝謝。

Answer 1

更改的元素可以在事件中引用。如果你給輸入你想更新一個普通的類，你可以找到與你的無線電相關的那個，通過找到無線電父母tr，並在其中找到該類。

$(document).ready(function() { 
 
    $('.allrb').change(valueE); 
 
}); 
 

 

 
function valueE(e) { 
 
    var newValue = e.target.value; 
 
    var $radio = $(e.target); 
 
    
 
    if ($radio.is('.Fr')) { 
 
    $radio.closest('tr').find('.numFr').val(newValue); 
 
    } else { 
 
    $radio.closest('tr').find('.numIr').val(newValue); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover table-responsive" id="tab"> 
 
    <tr id="alertr1" name="v"> 
 
    <td width="200px" id="text">content 1</td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr1" class="numFr" id="numFr1" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr1" class="numIr" id="numIr1" disabled></td> 
 
    </tr> 
 

 
    <tr id="alertr2" name="v"> 
 
    <td width="200px" id="text">content 2</td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr2" class="allrb Fr" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr2" class="allrb Fr" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir2" class="allrb Ir" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr2" class="numFr" id="numFr2" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr2" class="numIr" id="numIr2" disabled></td> 
 
    </tr> 
 

 
    <tr id="alertr3" name="v"> 
 
    <td width="200px" id="text">content 3</td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="0"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="1"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="2"></label></td> 
 
    <td width="40px"><label><input type="radio" name="Fr3" class="allrb Fr" value="3"></label></td> 
 
    <td width="30px"><label><input type="radio" name="Fr3" class="allrb Fr" value="4"></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="0" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir Ir3" class="allrb" value="1" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="2" ></label></td> 
 
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="3" ></label></td> 
 
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir3 Ir" class="allrb" value="4" ></label></td> 
 
    <td width="30px"><input type="number" name="numFr2" class="numFr" id="numFr2" disabled></td> 
 
    <td width="30px" bgcolor="Gainsboro"><input type="number" name="numIr3" class="numIr" id="numIr3" disabled></td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

這應該爲你工作，而無需更改HTML：

$(document).ready(function() { 
    $('.allrb').change(valueE); 
}); 

function valueE(e) { 
    var index = $(this).closest("tr").index(); 
    var newValue = e.target.value; 
    if ($(this).closest("td").attr("bgcolor") == "Gainsboro"){ 
    $("#numIr" + (index + 1)).val(newValue); 
    }else $("#numFr" + (index + 1)).val(newValue); 
} 

然而，這不是最後一排的第一個無線電組工作，因爲你的輸入有一個id="numFr2"，我相信你的意思是標記爲id="numFr3"一旦你改正了名字，它也適用於那個。