时间戳

首页 > 解决方案 > 使用 Jquery 从表格单元格中获取复选框的值

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> &lt;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 
});

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

标签： javascriptjqueryhtml

解决方案

您可以尝试以下逻辑，在哪里找到父项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> &lt;a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr> 
</table>

推荐阅读