【问题标题】：Hide/show second div element if first div class matches on selecting checkbox如果选中复选框时第一个 div 类匹配，则隐藏/显示第二个 div 元素
【发布时间】：2017-05-09 15:44:23
【问题描述】：

我有两个具有相同组名和子元素的 div。第二个 div 元素将在页面加载时隐藏。当用户选择第一个 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 中选择数学复选框，我应该在右侧 div 中看到“学术”组名和“数学”。

【问题讨论】：

id 属性在您的页面中应该是唯一的
可以贴出你试过的JS吗？

标签： javascript jquery

【解决方案1】：

Fiddle

要显示/隐藏.group2 中的单个项目，您不应隐藏整个组。而是隐藏各个项目，并在需要时显示它们。

修复 HTML

首先从该行中删除display: none;

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

然后删除所有ids 或将它们更改为class，因为ids 应该是唯一的。

使用 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) - 切换类别

Updated Fiddle (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) - 带空格的标签

Updated Fiddle (2)

如果您想在标签中包含空格，您可以camelize 将“计算机科学”更改为“计算机科学”（用于对象键）的文本。

更新代码（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|[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>

【讨论】：

效果很好！无论如何，我可以在第二个 div 的页面加载上隐藏组名（学术、体育）。当用户选择子元素时显示组名，当用户取消选择相应的组子元素时隐藏组名？
刚刚添加了显示/隐藏类别的更新。如果还有其他问题请告诉我，谢谢！
太棒了，很高兴它有帮助！
如果任何学科有空格（例如：计算机科学），它就会被破坏。你能帮我处理空格的情况吗？
刚刚更新 - 我将对象键骆驼化以使其工作