Javascript 使用jQuery自动单击相关的多个复选框

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

---

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

屏幕1:

s1的源代码：

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

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

额外服务

屏幕2:

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

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

s2的源代码：

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

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

d、 日期，“日期图标”）%%>
服务
1)
{
foreach（Model.Pets中的变量pet）
{ 
%>
s、 IsAnExtra&s.Key！=Model.Service.Key）.OrderBy（s=>s.DisplayIndex.ToList（）；
foreach（附加中的var服务）
{  %>

---

在复选框中单击事件：

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

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

试试看

$('#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)
})

---

请共享html代码，而不是images@ArunPJohny好的，我会更新。@Sampath是的，它应该可以工作……如果您可以共享生成的

ul

和

table

的html，它可以被测试“$（'table tbody tr'）.eq（idx）.find（'input:checkbox'）.prop（'checked'，this.checked）”语句没有选择任何项。你能告诉我为什么吗？我的案例索引不合适。所以你能建议另一种方法吗。因为有多个复选框时可以有多个索引。如我的图片所示。需要选择所有“整理”当我选择screen 1复选框时，请选中复选框。有什么想法吗？@Sampath而不是服务器端html模板。您可以发布生成的html…+1以获得支持。我完成上述任务的方式与您的解决方案略有不同。但您已向我显示了路径。我将稍后更新我的解决方案。感谢您的支持。实际上，我有两个不同的scr当我点击第一屏的复选框时，说“梳理”，然后自动点击第二屏的所有相关复选框（即所有梳理复选框）。