如果在jquery中选中了第一个复选框，如何获取下一个复选框值

Question

<script type="text/javascript">
$(document).ready(function() {
$('.list-dis input[type="checkbox"]').each(function() {
if ($(this).closest('tr').index() !== 0) {
$(this).prop('disabled', true).hide()
$(this).next().show()
}
}).on('change', function() {
$(this).prop('disabled', true)
$(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false).show()
.next().hide()
});
});
</script>
<table>
<tr>
<td>
<input type="checkbox" class="test" id="16"> value 1
</td>
<td>
<input type="checkbox" class="test" id="17"> value 2
</td>
<td>
<input type="checkbox" class="test" id="18"> value 3
</td>
<td>
<input type="checkbox" class="test" id="19"> value 4
</td>
<td>
<input type="checkbox" class="test" id="20"> value 5
</td>
</tr>
</table>

在上面的代码中，当我点击第一个复选框时，所有复选框都被禁用，而不是第一个，然后下一个复选框将被启用，第一个复选复选框被禁用，这很好。现在，当我选中第一个复选框，然后在警报中显示下一个复选框值时，我想要什么。那么，我该怎么做呢？请帮帮我。

谢谢

Answer 1

您可以添加以下内容：

var nexttd = $(this).closest('td').next('td');
if (nexttd.length != 0) alert($("input",nexttd).attr("id"))

演示

$(document).ready(function() {
$('.list-dis input[type="checkbox"]').each(function() {
if ($(this).closest('tr').index() !== 0) {
$(this).prop('disabled', true).hide()
$(this).next().show();
}
}).on('change', function() {
$(this).prop('disabled', true)
$(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false).show()
.next().hide();


var nexttd = $(this).closest('td').next('td');
if (nexttd.length != 0) alert($("input",nexttd).attr("id"))
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="list-dis">
<tr>
<td>
<input type="checkbox" class="test" id="16"> value 1
</td>
<td>
<input type="checkbox" class="test" id="17"> value 2
</td>
<td>
<input type="checkbox" class="test" id="18"> value 3
</td>
<td>
<input type="checkbox" class="test" id="19"> value 4
</td>
<td>
<input type="checkbox" class="test" id="20"> value 5
</td>
</tr>
</table>