0

最初の画面のチェック ボックスをクリックすると、関連するすべての 2 番目の画面のチェック ボックスが自動的にクリックされます。これを実現する方法を教えてください。

注：実際には2つの異なる画面があります.1番目の画面のチェックボックスをクリックすると、「グルーミング」と言うと、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>

ここに画像の説明を入力

4

2 に答える 2

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)
})
于 2013-09-11T13:29:47.377 に答える
0

チェックボックスのクリックイベントで：

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

これにより、同じ行のすべてのチェックボックスが検索され、チェックされます。これはあなたが求めているものですか？

于 2013-09-11T13:26:45.863 に答える