在按钮上单击同一行复选框应选中答案

【问题标题】：On button click same row checkbox should be checked在按钮上单击同一行复选框应选中
【发布时间】：2019-07-19 11:39:29
【问题描述】：

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

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

【问题讨论】：

jquery .closest() 和 .find() 应该可以解决您的问题

标签： javascript jquery asp.net

【解决方案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>

【讨论】：

【解决方案2】：

仅使用普通 JS 并不太难：

点击监听器调用checkit函数。
在函数内部，所有代码都包装在 if 块中，因此它仅在单击的元素是按钮之一（在本例中由 checkBtn 类标识）时运行。
该函数自动有权访问触发它的事件。为了便于阅读，我们将此参数称为event。
事件的target 属性为我们提供了被点击的按钮。
从那里，我们得到标签名称为TR 的closest 祖先元素，我们称之为row。
在这一行中，我们获取所有input 元素，取第一个，并将其命名为checkbox。
在此复选框中，我们添加属性“checked”（其值为空字符串）。
注意：被注释掉的行会让用户通过再次点击来切换“检查”。

document.addEventListener("click", checkit);

function checkit(event){
  if(event.target.classList.contains("checkBtn")){
    const row = event.target.closest("TR");
    const checkbox = row.getElementsByTagName("INPUT")[0];
    //if(checkbox.checked){ checkbox.removeAttribute("checked"); }
    //else{
      checkbox.setAttribute("checked", "");
    //}
  }
}

<table>
  <tr>
    <td><button class="checkBtn">Click me</button></td>
    <td><input type="checkbox" value="one" /></td>
  </tr>
  <tr>
    <td><button class="checkBtn">Click me</button></td>
    <td><input type="checkbox" value="two" /></td>
  </tr>
</table>

或者（如果速度不是问题），您可以在创建每个按钮时为其添加单独的 eventListener。在这种情况下，if 条件将是不必要的。

此代码可以更短，但为了清楚起见，示例更加明确。

【讨论】：