本文詳細(xì)介紹瞭如何利用jQuery實(shí)現(xiàn)多組複選框的“全選/全不選”功能，確保每組複選框在獨(dú)立的HTML容器內(nèi)進(jìn)行操作，互不影響。通過為父容器和“全選”複選框添加特定類名，結(jié)合jQuery的事件監(jiān)聽、DOM遍歷和屬性操作，實(shí)現(xiàn)點(diǎn)擊“全選”時(shí)控制同組所有復(fù)選框的選中狀態(tài)，以及反向聯(lián)動(dòng)，即當(dāng)所有同組複選框都被選中時(shí)自動(dòng)勾選“全選”，或任一複選框被取消選中時(shí)自動(dòng)取消“全選”。

核心需求與HTML結(jié)構(gòu)設(shè)計(jì)

在網(wǎng)頁開發(fā)中，我們經(jīng)常遇到需要在一組複選框中提供一個(gè)“全選”功能，以便用戶快速選中或取消選中所有相關(guān)選項(xiàng)。當(dāng)頁面上存在多組獨(dú)立的複選框集合時(shí)，例如在不同的分類或區(qū)域中，每組都需要有自己的“全選”功能，且彼此之間不能相互影響。

為了實(shí)現(xiàn)這一目標(biāo)，關(guān)鍵在於設(shè)計(jì)合理的HTML結(jié)構(gòu)，並利用jQuery的選擇器和DOM遍歷方法來限定操作範(fà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 A</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Item B</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Item C</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Item D</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Item E</div>
   </div>
</div>

結(jié)構(gòu)要點(diǎn)：

• myDiv 類：每個(gè)獨(dú)立的複選框組都包裹在一個(gè)具有myDiv 類的div 元素中。這個(gè)類名是關(guān)鍵，它允許我們通過jQuery輕鬆定位到特定的複選框組。
• selectAll 類：每個(gè)組內(nèi)的“全選”複選框都應(yīng)添加selectAll 類。這使得我們能夠準(zhǔn)確地選擇並監(jiān)聽這些特殊的複選框。
• name 屬性：雖然在此示例中所有復(fù)選框的name 屬性都是action，但在實(shí)際應(yīng)用中，為了更好的語義化和表單提交，可以為不同組的複選框設(shè)置不同的name 屬性，但這不影響本教程中的“全選”邏輯，因?yàn)槲覀兪腔禗OM結(jié)構(gòu)進(jìn)行操作。

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

我們將通過兩個(gè)主要的事件監(jiān)聽器來實(shí)現(xiàn)“全選/全不選”功能：一個(gè)用於處理“全選”複選框的點(diǎn)擊事件，另一個(gè)用於處理組內(nèi)其他普通複選框的點(diǎn)擊事件。

1. 控制“全選”複選框的點(diǎn)擊事件

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

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

  // 找到當(dāng)前“全選”複選框所屬的最近的父級(jí).myDiv 元素// 然後在該父級(jí)內(nèi)查找所有類型為checkbox 的input 元素$(this).parents('.myDiv').find('input[type="checkbox"]').each(function() {
    // 將所有找到的複選框的選中狀態(tài)設(shè)置為與“全選”複選框一致$(this).prop('checked', isSelected);
  });
});

代碼解析：

• $('.selectAll').on('click', function() { ... });：監(jiān)聽所有具有selectAll 類的複選框的點(diǎn)擊事件。
• let isSelected = $(this).is(':checked');：獲取當(dāng)前被點(diǎn)擊的“全選”複選框的選中狀態(tài)（true 或false）。
• $(this).parents('.myDiv')：這是關(guān)鍵一步。它向上遍歷DOM樹，找到當(dāng)前被點(diǎn)擊的“全選”複選框最近的、具有myDiv 類的父元素。這確保了操作只限定在當(dāng)前複選框所屬的組內(nèi)。
• .find('input[type="checkbox"]')：在找到的.myDiv 元素內(nèi)部，查找所有類型為checkbox 的input 元素。
• .each(function() { ... });：遍歷這些找到的複選框。
• $(this).prop('checked', isSelected);：使用prop() 方法設(shè)置每個(gè)複選框的checked 屬性。 prop() 是操作元素屬性的推薦方式，尤其適用於布爾屬性。

2. 控制獨(dú)立復(fù)選框的聯(lián)動(dòng)

當(dāng)用戶點(diǎn)擊組內(nèi)任意一個(gè)非“全選”的複選框時(shí)，我們需要根據(jù)同組內(nèi)所有復(fù)選框的選中情況，來決定是否勾選或取消勾選該組的“全選”複選框。

 $('input:not(".selectAll")').on('click', function() {
  // 獲取當(dāng)前被點(diǎn)擊的複選框所屬的最近的父級(jí).myDiv 元素let $parentDiv = $(this).parents('.myDiv');

  // 獲取該組內(nèi)“全選”複選框的DOM元素let selectAllCheckbox = $parentDiv.find('.selectAll')[0];

  // 獲取該組內(nèi)所有非“全選”複選框的數(shù)量let totalIndividualInputs = $parentDiv.find('input:not(".selectAll")').length;

  // 獲取該組內(nèi)所有已選中的非“全選”複選框的數(shù)量let checkedIndividualInputs = $parentDiv.find('input:checked:not(".selectAll")').length;

  // 邏輯判斷：
  // 1. 如果“全選”複選框當(dāng)前是選中狀態(tài)，但有任何一個(gè)獨(dú)立復(fù)選框被取消選中，則取消“全選”。
  if (selectAllCheckbox.checked && checkedIndividualInputs <p><strong>代碼解析：</strong></p>

• $('input:not(".selectAll")').on('click', function() { ... });：監(jiān)聽所有不是selectAll 類的input 類型複選框的點(diǎn)擊事件。
• let $parentDiv = $(this).parents('.myDiv');：同樣，向上找到當(dāng)前點(diǎn)擊複選框所屬的.myDiv 父元素，以限定操作範(fàn)圍。
• let selectAllCheckbox = $parentDiv.find('.selectAll')[0];：在當(dāng)前組內(nèi)找到“全選”複選框的DOM元素。注意[0] 是為了獲取原生DOM元素，因?yàn)閏hecked 屬性是原生DOM屬性。
• totalIndividualInputs 和checkedIndividualInputs：分別計(jì)算組內(nèi)非“全選”複選框的總數(shù)和已選中復(fù)選框的數(shù)量。
• 條件判斷：
  • 第一個(gè)if 條件：如果“全選”複選框已選中(selectAllCheckbox.checked)，但實(shí)際選中的獨(dú)立復(fù)選框數(shù)量少於總數(shù)(checkedIndividualInputs
  • 第二個(gè)else if 條件：如果所有獨(dú)立復(fù)選框都被選中(totalIndividualInputs === checkedIndividualInputs)，則自動(dòng)勾選“全選”複選框。

完整示例代碼

將上述HTML結(jié)構(gòu)和jQuery代碼結(jié)合起來，並在頁面中引入jQuery庫(kù)，即可實(shí)現(xiàn)所需功能。

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery多組全選複選框</title>
    <!-- 引入jQuery庫(kù)-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .myDiv {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 15px;
            background-color: #f9f9f9;
        }
        .myDiv div {
            margin-bottom: 5px;
        }
    </style>



<div class="actions" id="actions" title="Actions">
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="0"> **Select All Actions**</div>
<br>
       <div>
<input type="checkbox" name="action" value="1"> View Profile</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Edit Settings</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Delete Account</div>
<br>
   </div>

   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="26">**Select All Permissions**</div>
<br>
       <div>
<input type="checkbox" name="action" value="27"> Read Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Write Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Execute Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Admin Rights</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Audit Logs</div>
   </div>
</div>

<script>
$(document).ready(function() {
    // 全選複選框的點(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);
    });

    // 非全選複選框的點(diǎn)擊事件$(&#39;input:not(".selectAll")&#39;).on(&#39;click&#39;, function() {
        let $parentDiv = $(this).parents(&#39;.myDiv&#39;);
        let selectAllCheckbox = $parentDiv.find(&#39;.selectAll&#39;)[0];

        let totalIndividualInputs = $parentDiv.find(&#39;input:not(".selectAll")&#39;).length;
        let checkedIndividualInputs = $parentDiv.find(&#39;input:checked:not(".selectAll")&#39;).length;

        // 如果全選已勾選，但有子項(xiàng)被取消勾選，則取消全選if (selectAllCheckbox.checked && checkedIndividualInputs < totalIndividualInputs) {
            selectAllCheckbox.checked = false;
        } 
        // 如果所有子項(xiàng)都被勾選，則勾選全選else if (totalIndividualInputs === checkedIndividualInputs) {
            selectAllCheckbox.checked = true;
        }
    });
});
</script>

注意事項(xiàng)與最佳實(shí)踐

1. 類名和ID的合理使用：在本教程中，我們使用了類名(myDiv, selectAll) 而非ID來標(biāo)識(shí)元素，因?yàn)轭惷梢詰?yīng)用於多個(gè)元素，這非常適合多組“全選”複選框的場(chǎng)景。 ID應(yīng)該是唯一的。
2. jQuery選擇器效率： parents('.myDiv').find(...) 的組合使用是高效的，它首先向上查找最近的特定父元素，然後向下查找子元素，從而將搜索範(fàn)圍限定在當(dāng)前組內(nèi)，避免了不必要的全局DOM遍歷。
3. prop() 與attr()：對(duì)於布爾屬性（如checked, selected, disabled），推薦使用prop() 方法來設(shè)置或獲取它們的值，而不是attr()。 prop() 更準(zhǔn)確地反映了DOM元素的當(dāng)前狀態(tài)。
4. 原生DOM屬性訪問：在selectAllCheckbox.checked = false; 或selectAllCheckbox.checked = true; 中，我們直接訪問了原生DOM元素的checked 屬性。這是因?yàn)?(element)[0] 可以獲取jQuery對(duì)象包裝的第一個(gè)原生DOM元素，對(duì)於簡(jiǎn)單屬性的讀寫，直接操作原生DOM屬性通常更簡(jiǎn)潔。
5. 代碼可讀性：使用有意義的變量名（如isSelected, $parentDiv）和適當(dāng)?shù)脑]釋，可以大大提高代碼的可讀性和維護(hù)性。
6. 錯(cuò)誤處理/邊界情況：對(duì)於本功能，上述代碼已覆蓋了常見的使用場(chǎng)景。但在更複雜的應(yīng)用中，可能需要考慮動(dòng)態(tài)添加/刪除複選框的情況，此時(shí)可能需要重新綁定事件或使用事件委託。

總結(jié)

通過上述方法，我們成功地利用jQuery實(shí)現(xiàn)了在多個(gè)獨(dú)立容器中管理“全選/全不選”複選框的功能。核心在於通過清晰的HTML結(jié)構(gòu)定義組的邊界，並結(jié)合jQuery強(qiáng)大的DOM遍歷和事件處理能力，將操作範(fàn)圍精確地限定在每個(gè)獨(dú)立的複選框組內(nèi)部，從而實(shí)現(xiàn)互不干擾的獨(dú)立控制。這種模式在構(gòu)建複雜表單或數(shù)據(jù)篩選界面時(shí)非常實(shí)用。

以上是使用jQuery在獨(dú)立容器中管理'全選/全不選”複選框功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！