jquery - 选中复选框时将类添加到所有其他 div

Question

在底部编辑

TL;DR 我不确定如何将类属性添加到所有没有使用复选框选择的类的 div。

我正在尝试为小型指南列表创建排序脚本。所以我的想法是我的 div 标签将附加描述类，例如:

<div class="guide-block WINDOWS UPDATE INSTALL">

“windows、更新和安装”是“描述”类，仅用于排序目的。侧面带有复选框的列表将允许用户选择与他们需要查找的内容相关的复选框。示例:

<input type="checkbox" id="install"/>
<input type="checkbox" id="update"/>
<input type="checkbox" id="windows"/>

用户选择与其搜索相关的框，没有从复选框中选择的类的 div 将添加一个类，并显示:无；里面。这将使不相关的指南消失(理论上)。

我对 java 和 jquery 比较陌生，所以我不确定自己在做什么。我已经将来自该站点的其他类似问题的脚本拼凑在一起，以尝试制作我需要的代码。我已经让代码有点工作了。它将使具有匹配复选框的 div 在选中时消失。我想要相反的。我希望没有选中复选框的 div 消失。如果我有一个带有 UPDATE 和 INSTALL 的 div，我需要代码来识别它已经选择了一个并且仍然存在。因为现在，如果 div 有两个，而我选择了一个，它就会消失，因为另一个没有被选中。

$(document).ready(function(){
$('#install').change(function () {
    if (!this.checked)
        $("div.guide-block.install").css("display", "block");
    else
        $("div.guide-block.install").css("display", "none");
});
$('#update').change(function () {
    if (!this.checked)
        $("div.guide-block.update").css("display", "block");
    else
        $("div.guide-block.update").css("display", "none");
});
$('#windows').change(function () {
    if (!this.checked)
        $("div.guide-block.windows").css("display", "block");
    else
        $("div.guide-block.windows").css("display", "none");
});
});

如有任何帮助，我们将不胜感激。给我一份关于如何去做的指南，无论如何。我愿意学习这一点，但我用自己的知识碰壁，谷歌搜索不理解。虽然，我不太确定我在找什么哈。

编辑:我已经按照建议重写了代码。遗憾的是，这不起作用，但我觉得我更接近了。

$('#install').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.install)').hide();
    }
});

Answer 1

您需要创建一个选择器，其中包含所有选项类别，即 windows、update 和 install。

另外，为了在元素之间建立关系，我在小案例中使用了 css 类。

<div class="guide-block windows update install">
  1. windows, update, install
</div>

$(document).ready(function() {
  //Select the checkboxes
  var checkboxes = $('.checkboxContainer :checkbox');  
  //bind the change event hanlder
  checkboxes.on('change', function() {    
    //get the checked checkboxes id, It return create an array
    var checkedCssClasses = checkboxes.filter(':checked').map(function() {
      return this.id;
    }).get();
    //For Debugging purpose, 
    console.clear();
    console.log(checkedCssClasses);    
    //Get all guideBlocks
    var guideBlock = $("div#guide-container .guide-block");    
    //Hide all block
    guideBlock.hide();
    //any checkbox is checked
    if (checkedCssClasses.length> 0) {
      //Create the selector for elements      
      checkedCssClasses = '.' + checkedCssClasses.join('.')      
      //Show filtered element
      guideBlock.filter(checkedCssClasses).show();
    }
  });
});

.guide-block {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="guide-container">
  <div class="guide-block windows update install">
    1. windows, update, install
  </div>
  <div class="guide-block windows update">
    2. windows, update
  </div>
  <div class="guide-block install">
    3. install
  </div>
</div>
<div class="checkboxContainer">
  <input type="checkbox" id="install" />Install
  <br>
  <input type="checkbox" id="update" />Update
  <br>
  <input type="checkbox" id="windows" />Windows
</div>