本教程詳細介紹瞭如何使用jQuery 實現(xiàn)網(wǎng)頁中多個獨立區(qū)域內(nèi)復選框的“全選/全不選”功能。通過為每個區(qū)域設(shè)置一個“全選”複選框，並監(jiān)聽其及區(qū)域內(nèi)其他復選框的點擊事件，實現(xiàn)父子級複選框之間的狀態(tài)聯(lián)動。文章提供了清晰的HTML 結(jié)構(gòu)示例和完整的jQuery 代碼，幫助開發(fā)者高效地構(gòu)建用戶友好的表單交互。

在網(wǎng)頁開發(fā)中，我們經(jīng)常會遇到需要管理一組複選框，並提供一個“全選”功能來方便用戶操作的場景。當頁面上存在多個獨立的複選框組時，例如在不同的卡片或模塊中，每個組都需要有自己的“全選”功能，並且組與組之間互不影響。本教程將指導您如何使用jQuery 實現(xiàn)這種分區(qū)域的複選框聯(lián)動控制。

1. HTML 結(jié)構(gòu)準備

為了使jQuery 能夠高效地識別和操作不同區(qū)域的複選框，我們需要對HTML 結(jié)構(gòu)進行一些約定。關(guān)鍵在於為每個獨立的複選框組添加一個公共的父級類，並為每個組的“全選”複選框添加一個特定的類。

以下是推薦的HTML 結(jié)構(gòu)示例：

 <div class="actions" id="actions" title="Actions">
   <!-- 第一個複選框組-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="0"> Select All</div>
<br>
       <div>
<input type="checkbox" name="action" value="1"> Item 1</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Item 2</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Item 3</div>
<br>
   </div>

   <!-- 第二個複選框組-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="26">Select All</div>
<br>
       <div>
<input type="checkbox" name="action" value="27"> Item 4</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Item 5</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Item 6</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Item 7</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Item 8</div>
   </div>
</div>

結(jié)構(gòu)說明：

• div.myDiv: 這是每個獨立復選框組的容器。通過這個類，我們可以輕鬆地在jQuery 中定位到特定的組。
• input.selectAll: 這是每個組內(nèi)的“全選”複選框。
• 其他input[type="checkbox"]: 這些是組內(nèi)的普通複選框。

2. 核心jQuery 邏輯

我們將通過監(jiān)聽複選框的click 事件來實現(xiàn)聯(lián)動效果。主要分為兩部分邏輯：處理“全選”複選框的點擊事件，以及處理單個複選框的點擊事件。

在開始編寫JavaScript 代碼之前，請確保您的頁面中已引入jQuery 庫：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2.1 處理“全選”複選框的點擊事件

當用戶點擊某個“全選”複選框時，我們需要根據(jù)其當前狀態(tài)來同步該組內(nèi)所有其他復選框的狀態(tài)。

 $('.selectAll').on('click', function() {
  let isSelected = $(this).is(':checked'); // 獲取“全選”複選框的當前選中狀態(tài)// 找到當前“全選”複選框所在的父級.myDiv 容器// 然後在該容器內(nèi)查找所有類型為checkbox 的input 元素$(this).parents('.myDiv').find('input[type="checkbox"]').prop('checked', isSelected);
});

代碼解析：

• $('.selectAll').on('click', function(){...}): 為所有帶有selectAll 類的複選框綁定點擊事件。
• $(this).is(':checked'): 獲取當前被點擊的“全選”複選框的選中狀態(tài)（true 或false）。
• $(this).parents('.myDiv'): 從當前點擊的元素向上查找，直到找到最近的具有myDiv 類的父元素。這確保了我們只操作當前組內(nèi)的複選框。
• find('input[type="checkbox"]'): 在找到的myDiv 容器內(nèi)，查找所有type 為checkbox 的input 元素，包括“全選”複選框本身。
• .prop('checked', isSelected): 使用jQuery 的prop() 方法設(shè)置所有找到的複選框的checked 屬性，使其與“全選”複選框的狀態(tài)保持一致。

2.2 處理單個複選框的點擊事件

當用戶點擊組內(nèi)的任意一個普通複選框時，我們需要根據(jù)該組內(nèi)所有普通複選框的選中情況，來自動更新“全選”複選框的狀態(tài)。

 $('input:not(".selectAll")').on('click', function() {
  let $parentDiv = $(this).parents('.myDiv'); // 獲取當前複選框所在的父級.myDiv 容器// 獲取當前組內(nèi)所有非“全選”的普通複選框let $individualCheckboxes = $parentDiv.find('input:not(".selectAll")');

  // 獲取當前組內(nèi)所有非“全選”且已被選中的普通複選框let $checkedIndividualCheckboxes = $parentDiv.find('input:not(".selectAll"):checked');

  // 獲取當前組的“全選”複選框let $selectAllCheckbox = $parentDiv.find('.selectAll');

  // 檢查是否所有普通複選框都被選中if ($individualCheckboxes.length === $checkedIndividualCheckboxes.length) {
    // 如果所有普通複選框都選中，則“全選”複選框也應該選中$selectAllCheckbox.prop('checked', true);
  } else {
    // 否則，“全選”複選框應該取消選中$selectAllCheckbox.prop('checked', false);
  }
});

代碼解析：

• $('input:not(".selectAll")').on('click', function(){...}): 為所有不是selectAll 類的複選框綁定點擊事件。
• let $parentDiv = $(this).parents('.myDiv');: 同樣，獲取當前點擊複選框所屬的myDiv 容器。
• $parentDiv.find('input:not(".selectAll")'): 查找當前組內(nèi)所有非“全選”的複選框。
• $parentDiv.find('input:not(".selectAll"):checked'): 查找當前組內(nèi)所有非“全選”且處於選中狀態(tài)的複選框。
• 通過比較length 屬性，判斷所有普通複選框是否都被選中。
• $selectAllCheckbox.prop('checked', true/false): 根據(jù)判斷結(jié)果，更新當前組的“全選”複選框的選中狀態(tài)。

3. 完整示例代碼

將上述HTML 結(jié)構(gòu)和jQuery 邏輯整合在一起，即可實現(xiàn)所需的功能。

 


    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    




   

       

 Select All (Group 1)


       

 Item 1.1


       

 Item 1.2


       

 Item 1.3


   

   

       

Select All (Group 2)


       

 Item 2.1


       

 Item 2.2


       

 Item 2.3


       

 Item 2.4


       

 Item 2.5
   


<script>
$(document).ready(function() {
    // 處理“全選”複選框的點擊事件$(&#39;.selectAll&#39;).on(&#39;click&#39;, function() {
      let isSelected = $(this).is(&#39;:checked&#39;);
      $(this).parents(&#39;.myDiv&#39;).find(&#39;input[type="checkbox"]&#39;).prop(&#39;checked&#39;, isSelected);
    });

    // 處理單個複選框的點擊事件$(&#39;input:not(".selectAll")&#39;).on(&#39;click&#39;, function() {
      let $parentDiv = $(this).parents(&#39;.myDiv&#39;);
      let $individualCheckboxes = $parentDiv.find(&#39;input:not(".selectAll")&#39;);
      let $checkedIndividualCheckboxes = $parentDiv.find(&#39;input:not(".selectAll"):checked&#39;);
      let $selectAllCheckbox = $parentDiv.find(&#39;.selectAll&#39;);

      if ($individualCheckboxes.length === $checkedIndividualCheckboxes.length) {
        $selectAllCheckbox.prop(&#39;checked&#39;, true);
      } else {
        $selectAllCheckbox.prop(&#39;checked&#39;, false);
      }
    });
});
</script>

4. 注意事項與最佳實踐

• jQuery 庫引用：確保在您的JavaScript 代碼執(zhí)行之前，jQuery 庫已經(jīng)被正確引入。通常建議在 標籤結(jié)束前引入，或者在 中使用defer 屬性。
• 類名約定：保持myDiv 和selectAll 等類名的一致性，它們是jQuery 選擇器能夠準確工作的基礎(chǔ)。
• 性能考量：對於包含大量複選框的複雜頁面，雖然上述方法在大多數(shù)情況下表現(xiàn)良好，但如果遇到性能瓶頸，可以考慮使用事件委託($(document).on('click', '.selectAll', function(){...}))，它可以減少事件監(jiān)聽器的數(shù)量。
• 初始化狀態(tài)：如果頁面加載時某些複選框組可能已經(jīng)有部分或全部選中狀態(tài)，您可能需要在$(document).ready() 中添加額外的邏輯來初始化“全選”複選框的狀態(tài)。例如，遍歷每個.myDiv 並根據(jù)其內(nèi)部複選框的初始狀態(tài)來設(shè)置selectAll 複選框。

總結(jié)

通過本教程，您學會瞭如何利用jQuery 的事件監(jiān)聽和DOM 遍歷功能，實現(xiàn)分區(qū)域的複選框“全選/全不選”聯(lián)動控制。這種方法不僅結(jié)構(gòu)清晰、易於理解，而且能夠有效地提升用戶在處理多組表單數(shù)據(jù)時的操作體驗。掌握這種模式，將有助於您構(gòu)建更具交互性和用戶友好性的Web 應用。

以上是基於 jQuery 的分區(qū)域複選框聯(lián)動控制教程的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！