Asp.net Core Razor页面foreach渲染多行数据后，jQuery循环实现复选框勾选填充对应输入框的问题

Let's work through this step by step—your current code has two main issues that prevent it from working across all rows: duplicate HTML IDs (which are invalid and break selector logic) and event handling that targets global elements instead of the specific row the checkbox lives in. Here's how to fix it:

Step 1: Update Razor Markup (Fix Duplicate IDs & Clean Up) #

First, replace your loop with this revised markup. We'll swap dynamic duplicate IDs for reusable classes, fix a stray quote, and simplify how you reference loop items:

@{ int i = 0; }
@foreach (var item in Model.RCACategoryMains) {
    <div class="row no-gutters mb-1 row-container"> <!-- Replaced ID with unique class -->
        <div class="col-md-1">
            <span class="form-control">@item.IdRCAM</span> <!-- Use loop item directly instead of index lookup -->
        </div>
        <div class="col-md-4">
            <span class="form-control main-category" onclick="alert(this.classList)">@item.Category</span> <!-- Fixed stray quote, replaced ID with class -->
            <input type="text" class="form-control bg-white category-input" 
                   asp-for="RCACategoryList[i].RCACatName" 
                   name="selectedCategory[@i]" /> <!-- Replaced ID with class -->
        </div>
        <div class="col-md-2 text-center">
            <input type="checkbox" class="category-toggle" name="checkBox[@i]" 
                   data-toggle="toggle" data-on="Yes" data-off="No" 
                   data-width="200" data-height="40" data-onstyle="success" data-offstyle="danger"> <!-- Replaced ID with class -->
        </div>
    </div>
    i++;
}

Key changes here:

• Removed invalid duplicate dynamic IDs, using classes (row-container, main-category, category-input, category-toggle) instead
• Swapped Model.RCACategoryMains[i] for @item directly (cleaner and less error-prone)
• Fixed the extra quote in @Model.RCACategoryMains[i].Category" that would have caused rendering issues

Step 2: Updated jQuery Code (Target Per-Row Elements) #

Now we'll write a jQuery handler that works for every row by using relative selectors to target only the elements in the same row as the changed checkbox:

$(function () {
    // Use event delegation to handle both static and dynamically added rows
    $(document).on("change", ".category-toggle", function() {
        // Get the checkbox that triggered the change and its parent row
        const $toggle = $(this);
        const $row = $toggle.closest(".row-container");
        
        // Find the category text and input field within this specific row
        const categoryText = $row.find(".main-category").text().trim();
        const $input = $row.find(".category-input");
        
        // Update the input value based on checkbox state
        $input.val($toggle.is(":checked") ? categoryText : "");
    });

    // Optional: Initialize inputs for pre-checked boxes on page load
    $(".category-toggle:checked").trigger("change");
});

How This Works: #

1. Event Delegation: Using $(document).on("change", ".category-toggle", ...) ensures the handler works even if you add rows dynamically later. If your rows are always static on page load, you can use $(".category-toggle").on("change", ...) directly instead.
2. Relative Selection: $toggle.closest(".row-container") grabs the nearest parent row for the changed checkbox. Then $row.find(...) only selects elements inside that row—no more global ID conflicts or needing to loop through all rows!
3. Optional Initialization: The extra line triggers the change event for pre-checked boxes, so their inputs get populated immediately when the page loads.

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