应选中按钮单击同一行复选框

Question

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

我尝试匹配按钮和复选框控件的 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

你可以用.closest()和.find()在 jquery 中做到这一点。

例子：

$('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>