javascript - 使用 jQuery 自动单击相关的多复选框

Question

当我单击第一个屏幕的复选框时，应自动单击第二个屏幕上的相关所有复选框。您能告诉我如何实现这一点吗？

注意：实际上我有 2 个不同的屏幕。当我单击第一个屏幕的复选框时，说“修饰”，然后自动单击第二个屏幕的所有相关复选框（即所有修饰复选框）

屏幕 1：

S 1 的源代码：

<div class="padded-content">

    <h2>Extra Services</h2>
    <ul id="extra-services-details">
        <% foreach (var extra in Model.Provider.Services)
           {  %><li>
               <input id="<%: extra.Id %>"
                   type="checkbox" name="extraService" value="<%: extra.Id %>" /><label for="<%: extra.Id  %>"><%: extra.Name%></label></li>
        <% } %>
    </ul>
</div>

屏幕 2：

S 2 的源代码：

<div class="extra-service">
        <table id="extras">
            <thead>
                <tr>
                    <th></th>
                    <% 
                        foreach (var d in Model.Dates)
                        { 
                    %><th colspan="<%: Model.Pets.Count() %>"><%: Html.DisplayFor(m => d.Date, "DateIcon") %>
                    </th>
                    <% 
                        } 
                    %>
                </tr>
                <tr>
                    <th style="text-align: left;">Service</th>
                    <% 
                        foreach (var d in Model.Dates)
                        {
                            if (Model.Pets.Count() > 1)
                            {
                                foreach (var pet in Model.Pets)
                                { 
                    %><th id="<%: pet.Key%>"><%: pet.Name%></th>
                    <% 
                                }
                            }
                            else
                            {
                    %><th></th>
                    <%
                            }
                        } 
                    %>
                </tr>
            </thead>
            <tbody>
                <% 
                    var extras = Model.Provider.OfferredServices.Where(s => s.IsAnExtra && s.Key != Model.Service.Key).OrderBy(s => s.DisplayIndex).ToList();

                    foreach (var service in extras)
                    {  %>
                <tr>
                    <td><%: service.Name %> </td>
                    <% 
                        foreach (var d in Model.Dates)
                        {
                            foreach (var pet in Model.Pets)
                            { %><td style="text-align: center">
                                <input type="checkbox"
                                    value="<%: pet.Key %>-<%: d.Date.ToString("yyyyMMdd") %>-<%: service.Key %>" />
                            </td>
                    <% 
                            }
                        } 
                    %>
                </tr>
                <% } %>
            </tbody>
        </table>
    </div>

Answer 1

尝试

$('#extra-services-details input:checkbox').change(function(){
    var idx = $(this).closest('li').index();
    $('table tbody tr').eq(idx).find('input:checkbox').prop('checked', this.checked)
})

Answer 2

在复选框单击事件中：

$(this).closest('tr').find('input[type="checkbox"]')
       .prop({ checked: $(this).is(':checked') });

这将在同一行中找到所有复选框并检查它们。这是你要求的吗？