如果第一個div類在選中復選框時匹配，則隱藏/顯示第二個div元素

Question

我有兩個具有相同組名和子元素的div。 第二個div元素將在頁面加載時隱藏。 當用戶選擇第一個div子元素時，具有組名的各個子元素應顯示在第二個div上。 如果用戶在第一格中選擇重新指定選項，則隱藏在第二格中。

<div class="group1" style="float: left;border: 1px solid green;">
<p class="category">Academic</p>
<p class="subject-list">
    <label for="Maths">
        <input type="checkbox" id="Maths" name="Maths">Maths
    </label>
</p>
<p class="subject-list">
    <label for="English">
        <input type="checkbox" id="English" name="English">English
    </label>
</p>
<p class="subject-list">
    <label for="Science">
        <input type="checkbox" id="Science" name="Science">Science
    </label>
</p>
<p class="category">Sports</p>
<p class="subject-list">
    <label for="Tennis">
        <input type="checkbox" id="Tennis" name="Tennis">Tennis
    </label>
</p>
<p class="subject-list">
    <label for="cricket">
        <input type="checkbox" id="cricket" name="cricket">cricket
    </label>
</p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">
    <p class="category">Academic</p>
    <p class="subject-list">
        <label for="Maths">
            <div id="Maths" style="padding-left: 10px;">Maths</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="English">
            <div id="English" style="padding-left: 10px;">English</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="Science">
            <div id="Science" style="padding-left: 10px;">Science</div>
        </label>
    </p>
    <p class="category">Sports</p>
    <p class="subject-list">
        <label for="Tennis">
            <div id="Tennis" style="padding-left: 10px;">Tennis</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="cricket">
            <div id="cricket" style="padding-left: 10px;">cricket</div>
        </label>
    </p>
</div>

假設如果用戶在第一個div中選中了Maths復選框，我應該在右div中看到“ Academic”組名和“ Maths”。

Answer 1

小提琴

要顯示/隱藏.group2單個項目，您不應隱藏整個組。 而是隱藏單個項目，並在需要時顯示它們。

修正HTML

首先刪除display: none; 從這條線

<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">

然后刪除所有id或將它們更改為class因為id應該是唯一的。

使用CSS隱藏項目

.group2 div {
  display: none;
}

使用JavaScript切換可見性

$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});

完整代碼

 $('.group1').find('input').click(function(){ var item = $(this).attr('name'); $('.group2').find('.' + item).toggle(); }); 

 .group2 div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="group1" style="float: left;border: 1px solid green;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <input type="checkbox" class="Maths" name="Maths">Maths </label> </p> <p class="subject-list"> <label for="English"> <input type="checkbox" class="English" name="English">English </label> </p> <p class="subject-list"> <label for="Science"> <input type="checkbox" class="Science" name="Science">Science </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <input type="checkbox" class="Tennis" name="Tennis">Tennis </label> </p> <p class="subject-list"> <label for="cricket"> <input type="checkbox" class="cricket" name="cricket">cricket </label> </p> </div> <div class="group2" style="float: right; border: 1px solid red; width: 200px;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <div class="Maths" style="padding-left: 10px;">Maths</div> </label> </p> <p class="subject-list"> <label for="English"> <div class="English" style="padding-left: 10px;">English</div> </label> </p> <p class="subject-list"> <label for="Science"> <div class="Science" style="padding-left: 10px;">Science</div> </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <div class="Tennis" style="padding-left: 10px;">Tennis</div> </label> </p> <p class="subject-list"> <label for="cricket"> <div class="cricket" style="padding-left: 10px;">cricket</div> </label> </p> </div> 

更新（1）-切換類別

更新小提琴（1）

要顯示/隱藏類別而不更改HTML結構，您可以：

• 跟蹤每個類別中存在多少個活動項目
• 循環瀏覽每個類別並根據該類別的活動項目數顯示/隱藏它

更新的代碼（1）

 var totals = {}; $('.group1').find('input').click(function(){ var itemName = $(this).attr('name'); var item = $('.group2').find('.' + itemName).toggle(); var change = $(this).is(':checked') ? 1 : -1; var category = $(this) .closest('.subject-list') .prevAll('.category:first') .text(); totals[category] = change + (totals[category] || 0); updateCategories(); }); function updateCategories() { $('.group2').find('.category').each(function() { var thisCat = $(this).html(); if (thisCat in totals && totals[thisCat] > 0) { $(this).show(); } else { $(this).hide(); } }); } 

 .group2 div { display: none; } .group2 .category { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="group1" style="float: left;border: 1px solid green;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <input type="checkbox" class="Maths" name="Maths">Maths </label> </p> <p class="subject-list"> <label for="English"> <input type="checkbox" class="English" name="English">English </label> </p> <p class="subject-list"> <label for="Science"> <input type="checkbox" class="Science" name="Science">Science </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <input type="checkbox" class="Tennis" name="Tennis">Tennis </label> </p> <p class="subject-list"> <label for="cricket"> <input type="checkbox" class="cricket" name="cricket">cricket </label> </p> </div> <div class="group2" style="float: right; border: 1px solid red; width: 200px;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <div class="Maths" style="padding-left: 10px;">Maths</div> </label> </p> <p class="subject-list"> <label for="English"> <div class="English" style="padding-left: 10px;">English</div> </label> </p> <p class="subject-list"> <label for="Science"> <div class="Science" style="padding-left: 10px;">Science</div> </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <div class="Tennis" style="padding-left: 10px;">Tennis</div> </label> </p> <p class="subject-list"> <label for="cricket"> <div class="cricket" style="padding-left: 10px;">cricket</div> </label> </p> </div> 

更新（2）-帶空格的標簽

更新小提琴（2）

如果要在標簽中包含空格，則可以將文本進行駝峰化處理 ，從而將“計算機科學”更改為“計算機科學”（用於對象鍵）。

更新的代碼（2）

 var totals = {}; $('.group1').find('input').click(function(){ var itemName = $(this).attr('name'); var item = $('.group2').find('.' + itemName).toggle(); var change = $(this).is(':checked') ? 1 : -1; var categoryText = $(this) .closest('.subject-list') .prevAll('.category:first') .text(); var category = camelize( categoryText ); totals[category] = change + (totals[category] || 0); updateCategories(); }); function updateCategories() { $('.group2').find('.category').each(function() { var thisCat = camelize( $(this).html() ); if (thisCat in totals && totals[thisCat] > 0) { $(this).show(); } else { $(this).hide(); } }); } // From https://stackoverflow.com/a/2970667/5357459 function camelize(input) { return input.replace(/(?:^\\w|[AZ]|\\b\\w|\\s+)/g, function(match, index) { if (+match === 0) { return ''; } return index === 0 ? match.toLowerCase() : match.toUpperCase(); }); } 

 .group2 div { display: none; } .group2 .category { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="group1" style="float: left;border: 1px solid green;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <input type="checkbox" class="Maths" name="Maths">Maths </label> </p> <p class="subject-list"> <label for="English"> <input type="checkbox" class="English" name="English">English </label> </p> <p class="subject-list"> <label for="Science"> <input type="checkbox" class="Science" name="Science">Science </label> </p> <p class="subject-list"> <label for="computer-science"> <input type="checkbox" class="computer-science" name="computer-science">Computer science </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <input type="checkbox" class="Tennis" name="Tennis">Tennis </label> </p> <p class="subject-list"> <label for="cricket"> <input type="checkbox" class="cricket" name="cricket">cricket </label> </p> </div> <div class="group2" style="float: right; border: 1px solid red; width: 200px;"> <p class="category">Academic</p> <p class="subject-list"> <label for="Maths"> <div class="Maths" style="padding-left: 10px;">Maths</div> </label> </p> <p class="subject-list"> <label for="English"> <div class="English" style="padding-left: 10px;">English</div> </label> </p> <p class="subject-list"> <label for="Science"> <div class="Science" style="padding-left: 10px;">Science</div> </label> </p> <p class="subject-list"> <label for="computer-science"> <div class="computer-science" style="padding-left: 10px;">Computer science</div> </label> </p> <p class="category">Sports</p> <p class="subject-list"> <label for="Tennis"> <div class="Tennis" style="padding-left: 10px;">Tennis</div> </label> </p> <p class="subject-list"> <label for="cricket"> <div class="cricket" style="padding-left: 10px;">cricket</div> </label> </p> </div>