了解，這是將您提供的 12 個欄位套用到先前 Bootstrap 3/4 範本的 Index.vbhtml 程式碼。 核心的 JavaScript/jQuery 邏輯完全不需要變更，您只需要更新 View 中的 HTML 勾選區和表格欄位。 1. 欄位勾選區 (更新) 請將 Views/Home/Index.vbhtml 中 div.panel-body 的內容替換為以下程式碼。 > 注意： 為了讓 CSS class 生效，我將含有空格的名稱 (如 "Product Information") 轉換為 col-prod-info。 > <div class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" id="checkAll" checked /> <strong>全部選取</strong> </label> </div> <hr style="margin-top: 10px; margin-bottom: 10px;"> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-pdid" checked /> PDID </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-prod-info" checked /> Product Information </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-weight" checked /> Weight </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-tam" checked /> TAM </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-sam" checked /> SAM </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-1y-ship" checked /> 1Y shipment </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-qtd" checked /> QTD </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-mtd" checked /> MTD </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-backlog" checked /> Backlog </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-sales-fb" checked /> Sales Feedback </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-remark" checked /> Remark </label> <label class="checkbox-inline"> <input type="checkbox" class="column-toggle" data-column="col-qty" checked /> QTY </label> </div> 2. 資料表格 (更新) 接著，請更新 <table class="table ..."> 的 <thead> 和 <tbody>。 * <thead>: <th> 必須有對應的 class。 * <tbody>: <td> 必須有對應的 class。 <!-- end list --> <table class="table table-bordered table-striped" id="productTable"> <thead> <tr> <th class="col-pdid">PDID</th> <th class="col-prod-info">Product Information</th> <th class="col-weight">Weight</th> <th class="col-tam">TAM</th> <th class="col-sam">SAM</th> <th class="col-1y-ship">1Y shipment</th> <th class="col-qtd">QTD</th> <th class="col-mtd">MTD</th> <th class="col-backlog">Backlog</th> <th class="col-sales-fb">Sales Feedback</th> <th class="col-remark">Remark</th> <th class="col-qty">QTY</th> </tr> </thead> <tbody> @For Each item In Model Select Case True Case item IsNot Nothing @<tr> <td class="col-pdid">@item.PDID</td> <td class="col-prod-info">@item.ProductInfo</td> ' 假設 Model 屬性名稱 <td class="col-weight">@item.Weight</td> <td class="col-tam">@item.TAM</td> <td class="col-sam">@item.SAM</td> <td class="col-1y-ship">@item.Y1Shipment</td> ' 假設 Model 屬性名稱 <td class="col-qtd">@item.QTD</td> <td class="col-mtd">@item.MTD</td> <td class="col-backlog">@item.Backlog</td> <td class="col-sales-fb">@item.SalesFeedback</td> ' 假設 Model 屬性名稱 <td class="col-remark">@item.Remark</td> <td class="col-qty">@item.QTY</td> </tr> End Select Next </tbody> </table> 重點提醒： 請確保 <tbody> 中 @item.PropertyName 的屬性名稱 (例如 @item.ProductInfo, @item.Y1Shipment) 與您 VB.NET Model 中定義的屬性名稱一致。 @Section Scripts 中的 jQuery 程式碼無需任何修改即可運作。
是的，這正是先前範本中提供的 jQuery 程式碼所實現的功能。 我將這段邏輯再說明一次，您可以核對 Views/Home/Index.vbhtml 中 @Section Scripts 內的程式碼： 1. 「全部選取」控制「所有子項目」 這段程式碼負責處理您點擊 id="checkAll" (全部選取) 時的行為： // 1. 當 "全部選取" 被點擊時 $("#checkAll").click(function () { // 2. 獲取 "全部選取" 目前的狀態 (true 或 false) var isChecked = $(this).prop("checked"); // 3. 將這個狀態 (true/false) 強制套用到所有 class="column-toggle" 的子項目 $(".column-toggle").prop("checked", isChecked); // 4. 觸發所有子項目的 change 事件，來執行顯示/隱藏欄位 $(".column-toggle").trigger("change"); }); * 您勾選「全部選取」時 (isChecked = true)，所有子項目都會被設為 checked。 * 您取消「全部選取」時 (isChecked = false)，所有子項目都會被取消 checked。 這完全符合您的需求。 2. 「子項目」反向控制「全部選取」 此外，範本中的第二段程式碼也處理了反向邏輯，這能提供更好的使用者體驗： // 當 "單一欄位勾選" (子項目) 被點擊時 $(".column-toggle").change(function () { // ( ... 這裡省略顯示/隱藏欄位的程式碼 ... ) // 檢查：目前 "已勾選" 的子項目數量 var checkedCount = $(".column-toggle:checked").length; // 檢查： "全部" 子項目的總數 var totalCount = $(".column-toggle").length; // 如果 數量相等，"全部選取" 就打勾； // 如果 數量不相等 (即使只少一個)，"全部選取" 就取消打勾。 $("#checkAll").prop("checked", checkedCount === totalCount); }); * 當您手動取消任何一個子項目時，「全部選取」也會自動取消勾選。 * 當您手動勾選最後一個未選的子項目，使全部都打勾時，「全部選取」也會自動變為打勾。 結論： 您不需要修改任何 JavaScript 程式碼。先前範本中提供的 @Section Scripts 內容已經完整實現了您描述的「全選/全取消」以及反向連動功能。
