本文詳細(xì)介紹瞭如何利用jQuery 實(shí)現(xiàn)網(wǎng)頁(yè)中多組複選框的“全選/全不選”功能。通過(guò)為每個(gè)獨(dú)立的複選框組定義特定HTML結(jié)構(gòu)和類名，並編寫相應(yīng)的jQuery事件處理邏輯，可以高效管理各組內(nèi)復(fù)選框的選中狀態(tài)。教程涵蓋“全選”按鈕控制同組內(nèi)所有復(fù)選框，以及單個(gè)複選框狀態(tài)變化時(shí)更新“全選”按鈕的核心交互邏輯，並提供完整代碼示例。

在Web開發(fā)中，經(jīng)常會(huì)遇到需要對(duì)一組複選框進(jìn)行“全選”或“全不選”操作的需求。當(dāng)頁(yè)面上存在多個(gè)獨(dú)立的複選框組時(shí)，這種需求會(huì)變得更加複雜，因?yàn)槊總€(gè)組內(nèi)的“全選”功能都應(yīng)該只影響當(dāng)前組內(nèi)的複選框，而不會(huì)影響其他組。本教程將詳細(xì)闡述如何利用jQuery 優(yōu)雅地實(shí)現(xiàn)這一功能。

1. HTML 結(jié)構(gòu)設(shè)計(jì)

為了使jQuery 能夠準(zhǔn)確識(shí)別每個(gè)複選框組及其內(nèi)部的“全選”按鈕和普通複選框，我們需要設(shè)計(jì)一個(gè)清晰的HTML 結(jié)構(gòu)。關(guān)鍵在於為每個(gè)獨(dú)立的複選框組添加一個(gè)共同的父級(jí)容器，並為“全選”複選框添加一個(gè)特定的類名。

我們將使用一個(gè)div 元素作為每個(gè)複選框組的容器，並為其添加myDiv 類。每個(gè)組內(nèi)的“全選”複選框則統(tǒng)一添加selectAll 類。

 <div class="actions" id="actions" title="Actions">
   <!-- 第一個(gè)複選框組-->
   <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"> Action 1</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Action 2</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Action 3</div>
<br>
   </div>

   <!-- 第二個(gè)複選框組-->
   <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"> Action 27</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Action 28</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Action 29</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Action 30</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Action 31</div>
   </div>
</div>

說(shuō)明：

• class="myDiv"：標(biāo)識(shí)一個(gè)獨(dú)立的複選框組。
• class="selectAll"：標(biāo)識(shí)該組內(nèi)的“全選”複選框。
• name="action"：所有復(fù)選框可以共享相同的name 屬性，這不影響本教程的邏輯。

2. jQuery 邏輯實(shí)現(xiàn)

接下來(lái)，我們將編寫jQuery 代碼來(lái)處理複選框的交互邏輯。這主要包括兩部分：處理“全選”複選框的點(diǎn)擊事件，以及處理單個(gè)複選框的點(diǎn)擊事件。

2.1 處理“全選”複選框的點(diǎn)擊事件

當(dāng)用戶點(diǎn)擊某個(gè)“全選”複選框時(shí)，我們需要根據(jù)其選中狀態(tài)，同步更新其所在組內(nèi)的所有其他復(fù)選框的選中狀態(tài)。

 $('.selectAll').on('click', function() {
  // 獲取當(dāng)前“全選”複選框的選中狀態(tài)let isSelected = $(this).is(':checked');

  // 找到當(dāng)前“全選”複選框的父級(jí)組（.myDiv），然後在其內(nèi)部查找所有復(fù)選框// 並將它們的選中狀態(tài)設(shè)置為與“全選”複選框一致$(this).parents('.myDiv').find('input[type="checkbox"]').prop('checked', isSelected);
});

解釋：

• $('.selectAll').on('click', function() { ... });：為所有帶有selectAll 類的複選框綁定點(diǎn)擊事件。
• $(this).is(':checked')：獲取當(dāng)前被點(diǎn)擊的“全選”複選框的選中狀態(tài)（true 或false）。
• $(this).parents('.myDiv')：向上遍歷DOM 樹，找到當(dāng)前selectAll 複選框最近的、帶有myDiv 類的父元素，這確保了操作僅限於當(dāng)前組。
• .find('input[type="checkbox"]')：在找到的.myDiv 組內(nèi)，查找所有input 類型為checkbox 的元素。
• .prop('checked', isSelected)：設(shè)置這些找到的複選框的checked 屬性，使其與isSelected 的值保持一致。

2.2 處理單個(gè)複選框的點(diǎn)擊事件

當(dāng)用戶點(diǎn)擊組內(nèi)某個(gè)非“全選”的普通複選框時(shí)，我們需要檢查該組內(nèi)所有普通複選框的選中狀態(tài)，並據(jù)此更新“全選”複選框的狀態(tài)。具體邏輯是：如果所有普通複選框都被選中，則“全選”複選框也應(yīng)該被選中；否則，“全選”複選框應(yīng)該處?kù)段催x中狀態(tài)。

 $('input:not(".selectAll")').on('click', function() {
  // 獲取當(dāng)前複選框所在的父級(jí)組（.myDiv）
  let $parentDiv = $(this).parents('.myDiv');

  // 獲取當(dāng)前組內(nèi)所有非“全選”的普通複選框let $normalCheckboxes = $parentDiv.find('input:not(".selectAll")');

  // 獲取當(dāng)前組內(nèi)被選中的普通複選框的數(shù)量let numberInputChecked = $normalCheckboxes.filter(':checked').length;

  // 獲取當(dāng)前組內(nèi)普通複選框的總數(shù)量let numberInput = $normalCheckboxes.length;

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

  // 如果所有普通複選框都被選中，則“全選”複選框也應(yīng)被選中if (numberInput === numberInputChecked) {
    $selectAllCheckbox.prop('checked', true);
  } else {
    // 否則，“全選”複選框應(yīng)處?kù)段催x中狀態(tài)$selectAllCheckbox.prop('checked', false);
  }
});

解釋：

• $('input:not(".selectAll")').on('click', function() { ... });：為所有不是selectAll 類的input 複選框綁定點(diǎn)擊事件。
• let $parentDiv = $(this).parents('.myDiv');：同樣，先定位到當(dāng)前複選框所屬的.myDiv 組。
• $parentDiv.find('input:not(".selectAll")')：在當(dāng)前組內(nèi)找到所有非“全選”的複選框。
• .filter(':checked').length：從上述普通複選框中篩選出已選中的，並獲取其數(shù)量。
• $normalCheckboxes.length：獲取普通複選框的總數(shù)量。
• 通過(guò)比較選中數(shù)量和總數(shù)量，來(lái)決定“全選”複選框的checked 屬性。

3. 完整示例代碼

將上述HTML 結(jié)構(gòu)和jQuery 邏輯結(jié)合起來(lái)，即可實(shí)現(xiàn)所需功能。請(qǐng)確保在運(yùn)行代碼前引入jQuery 庫(kù)。

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多區(qū)域複選框全選功能</title>
    <!-- 引入jQuery 庫(kù)-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* 簡(jiǎn)單的樣式，使結(jié)構(gòu)更清晰*/
        .myDiv {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .myDiv div {
            margin-bottom: 5px;
        }
        .myDiv .selectAll {
            font-weight: bold;
            color: #0056b3;
        }
    </style>



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

       <!-- 第二個(gè)複選框組-->
       <div class="myDiv">
           <div>
<input type="checkbox" name="action" class="selectAll" value="26">Select All (Group 2)</div>
<br>
           <div>
<input type="checkbox" name="action" value="27"> Item 2.1</div>
<br>
           <div>
<input type="checkbox" name="action" value="28"> Item 2.2</div>
<br>
           <div>
<input type="checkbox" name="action" value="29"> Item 2.3</div>
<br>
           <div>
<input type="checkbox" name="action" value="30"> Item 2.4</div>
<br>
           <div>
<input type="checkbox" name="action" value="31"> Item 2.5</div>
       </div>
    </div>

    <script>
        // 處理“全選”複選框的點(diǎn)擊事件$(&#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);
        });

        // 處理單個(gè)複選框的點(diǎn)擊事件$(&#39;input:not(".selectAll")&#39;).on(&#39;click&#39;, function() {
            let $parentDiv = $(this).parents(&#39;.myDiv&#39;);
            let $normalCheckboxes = $parentDiv.find(&#39;input:not(".selectAll")&#39;);
            let numberInputChecked = $normalCheckboxes.filter(&#39;:checked&#39;).length;
            let numberInput = $normalCheckboxes.length;
            let $selectAllCheckbox = $parentDiv.find(&#39;.selectAll&#39;);

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

4. 注意事項(xiàng)與總結(jié)

• 類名約定：使用myDiv 和selectAll 這樣的通用類名，可以使代碼更具可讀性和可維護(hù)性，方便在多個(gè)頁(yè)面或組件中復(fù)用。
• 作用域限定： parents('.myDiv').find(...) 的組合使用是實(shí)現(xiàn)局部“全選”功能的關(guān)鍵。它確保了操作只在當(dāng)前複選框組內(nèi)部進(jìn)行，避免了跨組影響。
• 性能考量：對(duì)於包含大量（成百上千個(gè)）複選框的複雜頁(yè)面，頻繁的DOM 操作可能會(huì)影響性能。但對(duì)於大多數(shù)常見應(yīng)用場(chǎng)景，本教程提供的方法性能是完全足夠的。
• 初始狀態(tài)：如果頁(yè)面加載時(shí)某些複選框默認(rèn)是選中狀態(tài)，你可能需要在頁(yè)面加載完成後執(zhí)行一次檢查，以正確設(shè)置初始的“全選”複選框狀態(tài)。這可以通過(guò)在$(document).ready() 中觸發(fā)一次click 事件或手動(dòng)調(diào)用邏輯來(lái)實(shí)現(xiàn)。
• 用戶體驗(yàn)：考慮為“全選”複選框添加額外的樣式，使其更易於識(shí)別。

通過(guò)以上步驟，我們成功地實(shí)現(xiàn)了在多個(gè)獨(dú)立div 區(qū)域內(nèi)管理複選框的“全選/全不選”功能。這種方法結(jié)構(gòu)清晰，邏輯嚴(yán)謹(jǐn)，是處理此類交互需求的有效實(shí)踐。

以上是使用 jQuery 實(shí)現(xiàn)多區(qū)域內(nèi)復(fù)選框的'全選/全不選”功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！