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>

Answer 2

仅使用香草JS并不难：

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

checkbox

checked

或者（如果不考虑速度），可以在创建每个按钮时向每个按钮添加单独的eventListener。在这种情况下，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", ""); //} } }条件是不必要的。

这段代码可能会更短一些，但是为了清楚起见，示例更加明确了。

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

2 个答案: