表格行按钮点击对应行复选框勾选异常问题求助

Hey there, let's fix this frustrating checkbox selection issue once and for all!

The Root Cause of Your Problem #

Looking at your code, the main issue is that your req_ser() function is looping through all buttons and checkboxes every time you click a button, and it's even re-setting their IDs on each click. Worse, as soon as it hits the first element in the loop, it checks that checkbox and breaks out—so no matter which button you click, it'll always end up checking the first row's checkbox if you don't click in order. That's why skipping to the second row button selects the first checkbox.

Simple Fix 1: Use the Button's ID to Target the Exact Checkbox #

First, update your button's onclick handler to pass the clicked button itself into the function. This lets you directly reference the button that was clicked, no looping needed:

// Updated column generation code
cols += '<td><button type="button" class="btn btn-info btn-sm btn-block" onclick="req_ser(this)" 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>';

Then rewrite your req_ser() function to extract the row number from the button's ID and target the matching checkbox:

function req_ser(clickedBtn) {
    // Grab the unique number from the button's ID (e.g., "check_btn3" → "3")
    const rowId = clickedBtn.id.replace('check_btn', '');
    
    // Find the exact checkbox for this row
    const targetCheckbox = document.getElementById(`check${rowId}`);
    
    // Check it!
    targetCheckbox.checked = true;
    
    // If you need the serial number for this row, grab it directly too
    const serialElement = document.getElementById(`slnchk${rowId}`);
    const selectedSerial = [{ serial: serialElement?.innerText || '' }];
    
    // Add your request logic here using selectedSerial
}

Even Better Fix 2: Avoid IDs Altogether (More Robust) #

If you want to decouple your code from ID naming rules (which is always a good practice), you can use DOM traversal to find the checkbox in the same row as the clicked button:

function req_ser(clickedBtn) {
    // Get the parent row of the clicked button
    const parentRow = clickedBtn.closest('tr');
    
    // Find the checkbox inside this row
    const targetCheckbox = parentRow.querySelector('.chec');
    
    // Check the checkbox
    targetCheckbox.checked = true;
    
    // Grab the serial number from the same row (adjust the selector to match your actual element)
    const serialElement = parentRow.querySelector('[id^="slnchk"]'); // Matches IDs starting with "slnchk"
    const selectedSerial = [{ serial: serialElement?.innerText || '' }];
    
    // Proceed with your request logic
}

This approach doesn't care about IDs at all—it just looks for the checkbox in the same table row as the button you clicked. It's more flexible if you ever change your ID formatting later.

Why This Works #

Both fixes eliminate the messy loop that was causing your selection bug. Instead of guessing which checkbox to check, we directly target the one that belongs to the clicked button's row. No more random checkbox selections, no matter which button you click!

内容的提问来源于stack exchange，提问作者ishaan Gupta