最初のdivクラスがチェックボックスの選択時に一致する場合、second div要素を表示/非表示

Question

同じグループ名と子要素を持つ2つのdivがあります。 2番目のdiv要素はページの読み込み時に非表示になります。ユーザーが最初のdiv要素を選択すると、グループ名を持つそれぞれの子要素が2番目のdivに表示されます。最初のdivでユーザーがrespecitveオプションを選択すると、2番目の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で数学のチェックボックスを選択した場合、私は右のdivに「アカデミック」のグループ名と「数学」を参照してくださいする必要がありましょう。

Answer 1

Fiddle

あなたがグループ全体を隠してはならない.group2で個々の項目を表示/非表示にします。代わりに個々のアイテムを非表示にし、必要なときにそれらを表示します。

修正HTML

まずid sが一意である必要がありますので、その後、すべてのあなたのid秒を削除するか、classにそれらを変更するには、このラインから

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

をdisplay: none;を削除します。完全なコードはJavaScript

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

を使用して

.group2 div { 
    display: none; 
} 

トグルの可視性をCSSを使って

隠すアイテム

$('.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） - ことができますHTMLの構造変更せずにカテゴリを表示/非表示にするにはカテゴリー

Updated Fiddle (1)

を切り替え：アクティブなアイテムが各カテゴリ のために存在するどのように多くのトラックをキープ

• を
• 各カテゴリをループし、そのカテゴリのアクティブなアイテムの数に基づいて表示/非表示を切り替えます。

コードは、（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) 
 
    \t .closest('.subject-list') 
 
     .prevAll('.category:first') 
 
     .text(); 
 
    totals[category] = change + (totals[category] || 0); 
 
    updateCategories(); 
 
}); 
 

 
function updateCategories() { 
 
    $('.group2').find('.category').each(function() { 
 
    \t var thisCat = $(this).html(); 
 
    if (thisCat in totals && totals[thisCat] > 0) { 
 
    \t $(this).show(); 
 
    } else { 
 
    \t $(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） - あなたはどの希望のテキストをcamelizeすることができ、あなたのラベルにスペースを含める場合は、スペース

Updated Fiddle (2)

とラベル'computer science'を 'computerScience'に変更します（オブジェクトキー用に使用されます）。

更新されたコード（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) 
 
    \t .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() { 
 
    \t var thisCat = camelize($(this).html()); 
 
    if (thisCat in totals && totals[thisCat] > 0) { 
 
    \t $(this).show(); 
 
    } else { 
 
    \t $(this).hide(); 
 
    } 
 
    }); 
 
} 
 
// From https://stackoverflow.com/a/2970667/5357459 
 
function camelize(input) { 
 
    return input.replace(/(?:^\w|[A-Z]|\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>