javascript - 在按钮单击同一行复选框时应选中

Question

我在表格每一行的末尾放置了一个按钮和一个复选框。我现在想要的是，如果我单击第 1 行中的按钮，则仅选中第 1 行中的复选框，依此类推。如果我依次从第一行转到最后一行，代码工作正常。 如果我直接点击例如，就会出现问题。第二排。如果我单击第二行，则选中第一行的复选框。

我已经尝试匹配按钮和复选框控件的 ID，但这是不可能的，因为 ID 中的名称总是不同的。

  cols += '<td><button type="button" class="btn btn-info btn-sm btn-block" onclick="req_ser()" id="check_btn' + limit + '" value="' + data + '">Request</button></td>';

cols +='<td><input type="checkbox" class="chec" id="check' + limit + '" value="' + data + '" disabled="disabled"></input></td>';


function req_ser() {    
    var sl_num = [];
    var count = 0;
    for (var bv = 0; bv <= limit; bv++) {
        var stai;       
        var bvv = bv + 1;
        var cls = document.getElementsByClassName("btn btn-info btn-sm btn-block");
        var chs = document.getElementsByClassName("chec")
        cls[bv].id = "check_btn" + (bv + 1);
        chs[bv].id = "check" + (bv + 1);
        alert(cls[bv].id);
        alert(chs[bv].id);
        //stai = $('#check' + bvv + '').on(':click');
        //stai = $('#check' + bvv + '').is(':clicked'); 
        //stai = $('#check' + bvv + '').data(':clicked', true); 
            $('#check' + bvv + '').prop('checked', true);
            stai = $('#check' + bvv + '').is(':checked');       
        if (stai == true) {
                sl_num.push({
                    "serial": document.getElementById("slnchk" + bvv + "").innerText,
                });            
            break;            
        }
    }

预期结果是我单击的任何行按钮，只应选中该行复选框。请对此进行指导。

Answer 1

您可以在 jquery 中使用 .closest() 和 .find() 来完成。

例子:

$('td .btn').on("click", function() {
  $(this).closest('tr').find('.chec').prop("checked", true);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
  <tr>
    <td><button type="button" class="btn btn-info btn-sm btn-block">Request</button></td>
    <td><input type="checkbox" class="chec" disabled="disabled"></td>
  </tr>
</table>