javascript - 使用Jquery从表单元格获取复选框的值

单击“扩展”时，我需要获取复选框的值，我尝试了以下操作，看起来很笨拙，并且在修改DOM时，它可能会呈现未定义状态，而不是期望值CBVALUE

<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE
});

有比遍历相关元素更简单的解决方案吗？

最佳答案

您可以尝试下面的逻辑，在其中找到父tr，然后找到checkbox以读取值

$(function(){
$('.option').on('click', function(e) {
    e.preventDefault();
    var value = $(this).closest('tr').find('input:checkbox').val();
    alert(value);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
</table>