如何使用jQuery使用每行的单选按钮添加计数？

Question

我想在每行中添加count+，如下所示。在具有所有无线电名称的第一个tr中，应该是xRay1。在第二个tr中，所有无线电名称应为xRay2。我尝试过的：

$(document).ready(function() {
$('.changeRadioName').click(function() {
$('.table tr').each(function() {
var count = 1;
$(this).find('input:radio[name="xRay"]').attr('name', count);
count++;
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="changeRadioName">Change name of each row's radio</button>
<table class="table table-bordered table-striped table-hover">
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
</table>

Answer 1

我试着得到你的结果，使用每个函数中的计数器变量

$(document).ready(function(){

$('.changeRadioName').click(function(){
var count = 1;
$('.table tr').each(function () {
$(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+count);
				
count++;
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="changeRadioName">Change name of each row's radio</button>

<table class="table table-bordered table-striped table-hover">
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
</table>

Answer 2

要实现这一点，您可以遍历每个tr并找到其中的无线电。然后，您可以使用当前tr的索引并将其附加到无线电的当前name，类似于以下内容：

$('.changeRadioName').click(function() {
$('.table tr').each(function(i) {
$(this).find(':radio').prop('name', function(_, name) {
return name + (i + 1);
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="changeRadioName">Change name of each row's radio</button>
<table class="table table-bordered table-striped table-hover">
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
</table>

Answer 3

$(document).ready(function(){

$('.changeRadioName').click(function(){
var count = 1;
$('.table tr').each(function () {

$(this).find('input:radio[name="xRay"]').attr('name', "xRay"+count);
count++;
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="changeRadioName">Change name of each row's radio</button>

<table class="table table-bordered table-striped table-hover">
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
</table>

Answer 4

您可以使用：

$(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+(i+1));

这里我使用的是i，而不是计数器，计数器是元素的索引，也是jQuery中each方法的函数回调的第一个参数。我也在使用您的相同代码，但是，它略有修改，因为我将当前索引+1(i+1(与单词xRay:连接起来

.attr('name', 'xRay'+(i+1));

参见下面的工作示例：

$(document).ready(function() {
$('.changeRadioName').click(function() {
$('.table tr').each(function(i) {
$(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+(i+1));
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="changeRadioName">Change name of each row's radio</button>
<table class="table table-bordered table-striped table-hover">
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
<tr>
<td>
<label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
<label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
</td>
</tr>
</table>

Answer 5

您的count应在tr循环之外初始化，attr应将xRay + count分配给每个单选按钮。

最终的jQuery代码应该看起来像：

$(document).ready(function() {
$('.changeRadioName').click(function() {
var count = 1;
$('.table tr').each(function() {
$(this).find('input:radio[name="xRay"]').attr('name', 'xRay' + count);
count++;
});
});
});