How to get value of 2 different radio box and set it to specific place using loop/each?
Solution 1:
The element that is changed can be referenced on the event. If you give the input you want to update a common class, you can find the one that is related to your radios by finding the radios parent tr, and finding that class within.
$(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>Solution 2:
This should work for you without changing the 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);
}
However, this won't work for your first radio group of the last row since your input has an id="numFr2", which I believe you meant to label as id="numFr3" Once you correct the name it will work for that one as well.