On button click same row checkbox should be checked

Question

I have placed a button and checkbox at end of each row of the table. I want now is that if I click button in row 1 then checkbox only in row 1 gets checked and so on. code is working fine if I go from 1st to last row turn by turn. Problem occurs if I click directly on for eg. 2nd row. if I click in 2nd row then the checkbox in 1st row is selected.

I have tried matching the ids of button and checkbox control but that is not possible as the name in id will always be different.

  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;            
        }
    }

expected result is whichever row button I click only that row checkbox should be checked. Please guide regarding this.

Answer 1

You can do it with .closest() and .find() in jquery.

Example:

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

It's not too difficult with just vanilla JS:

• A click listener calls the checkit function.

• Inside the function, all the code is wrapped in an if block so it only runs if the clicked element is one of the buttons (which, in this case, are identified by the checkBtn class).

  ---

• The function automatically has access to the event that triggered it. We refer to this argument as event for ease of reading.

• The event's target property gives us the button that was clicked.
• From there, we get the closest ancestor element with the tagName TR , and we call it row .

• Within this row, we get all the input elements, take the first one, and call it checkbox .

  ---

• To this checkbox, we add the attribute " checked " (with an empty string as its value).
  Note: The lines that are commented out would let the user toggle the "check" by clicking again.

 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> 

Alternatively (and if speed is not a concern), you can add a separate eventListener to each button as you create it. In this case, the if condition would be unnecessary.

This code could be shorter but the example is more explicit for the sake of clarity.