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

Question

我需要在单击“展开”时获取复选框的值，我尝试了以下方法，这看起来很笨拙，并且当修改 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 
});

有没有比使用相对元素遍历更简单的解决方案？

Answer 1

您可以尝试以下逻辑，找到父级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>