当复选框被选中时，将类添加到所有其他div

Question

底部编辑

简述：我不知道如何给没有我勾选的类的所有div标签添加class属性。

我试图创建一个排序脚本来管理一个小型指南列表。我的想法是，我的div标签将附有描述性的类，例如：

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

"Windows，Update和Install"是只用于排序目的的“描述”类。一个带有复选框的列表将允许用户选择与他们需要查找的相关复选框。例如：

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

用户选择与其搜索相关的复选框，然后没有被选中的复选框所对应的 div 就会添加一个 display: none; 的 class。这样就可以让不相关的指南（理论上）消失。

我相对于 Java 和 JQuery 来说还比较新手，不太确定自己在做什么。我从这个网站上其他类似问题的脚本中拼凑出了我需要的代码。我已经让代码部分工作了。当勾选时它会使匹配的复选框所对应的 div 消失。但是我想要相反的效果。我希望没有被勾选的复选框所对应的 div 消失。如果我的 div 上有 UPDATE 和 INSTALL，我需要代码认识到其中有一个被选中并且依旧保留该 div。因为现在的情况是，即使 div 中含有 UPDATE 和 INSTALL，只要其中一个被选中，整个 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();
    }
});

- Dakota

---

你能否再讲得更清楚一些？这还是有点令人困惑。 - aavrug

在顶部添加了一个 TL;DR - Dakota

@Dakota：请看我的回答。 - Sandeep Nayak

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>

- Satpal

---

我刚刚想出了如何做到这一点。非常感谢你的帮助。我使用了你在另一篇帖子中发布的代码并进行了修改。非常感谢！！ - Dakota

@Dakota，希望这可以满足您的要求。 - Satpal

我刚刚使用了这个，它比我的更好。我将"display: none;"更改为"block"，以便在页面加载时显示它们。谢谢你的帮助！ - Dakota

Answer 2

这里提供的不是最华丽的解决方案，但我认为这是最简单的方法，有助于推进您对jQuery的学习。对我而言，jQuery很大程度上涉及与CSS的交互，因此我包括了jQuery与CSS之间的交互来完成工作。

基本上，我们想要默认隐藏所有guide-blocks，然后使用SHOW- CSS类在需要时显示它们。SHOW-类起作用是因为它们具有更高的CSS“特异性”。

$(document).ready(function() {
  $('#install').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-INSTALL");
      else
          $("div#guide-container").removeClass("SHOW-INSTALL");
  });
  $('#update').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-UPDATE");
      else
          $("div#guide-container").removeClass("SHOW-UPDATE");
  });
  $('#windows').change(function () {
      if (this.checked)
          $("div#guide-container").addClass("SHOW-WINDOWS");
      else
          $("div#guide-container").removeClass("SHOW-WINDOWS");
  });
});

.guide-block {
  display: none;
}

.SHOW-WINDOWS>.guide-block.WINDOWS {
  display: block;
}
.SHOW-UPDATE>.guide-block.UPDATE {
  display: block;
}
.SHOW-INSTALL>.guide-block.INSTALL {
  display: block;
}

<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>
<input type="checkbox" id="install"/>Install<br>
<input type="checkbox" id="update"/>Update<br>
<input type="checkbox" id="windows"/>Windows

- jameslol

---

好的，这很接近了！那么在显示所有指南之前，他们能看到那里有指南吗？页面加载时我应该将所有复选框都选中吗？ - Dakota

实际上，有没有一种方法可以在页面加载时显示所有指南，并使复选框为空。这样他们就可以勾选他们想要的框，然后页面将对指南进行排序。这将是为那些不太“技术娴熟”的人准备的，所以我希望尽可能简单和直观。 - Dakota

KISS - 将您的排序作为一个独立且明显的项目，否则您会让您的用户感到困惑，无论他们是否精通技术。 - jameslol

关于默认已选中的内容... 这只是HTML！ <input type="checkbox" id="install" checked/>将类添加到您的容器div中：<div id="guide-container" class="SHOW-INSTALL SHOW-UPDATES SHOW-WINDOWS"> - jameslol

我有排序占据左边 30%，指南占据右边 70%。所以它应该很明显，在移动设备上它将在顶部。我觉得我正在陷入一个太难的兔子洞。是否有一种方法可以向没有选定类的 div 添加类？ - Dakota

Answer 3

我不确定你具体在寻找什么，但据我理解，这里是你的解决方案。

$(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");
    }
  });
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="guide-block install">Install</div>
<div class="guide-block update">Update</div>
<div class="guide-block windows">Windows</div>
<input type="checkbox" id="install"/>
<input type="checkbox" id="update"/>
<input type="checkbox" id="windows"/>

- aavrug

Answer 4

以下是您需要做的：

工作示例

$(document).ready(function() {
  $("input[type='checkbox']").change(function() {
    var chkboxArray = $(" input[type='checkbox']:checked").map(function() {
      return $(this).attr("id");
    }).get();
    $("div.guide-block").hide();
    for (var i = 0; i < chkboxArray.length; i++) {
      $("div.guide-block." + chkboxArray[i]).show();
    }


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="guide-block windows update install">WINDOWS UPDATE INSTALL</div>
<div class="guide-block update install">UPDATE INSTALL</div>
<input type="checkbox" id="install" />Install
<input type="checkbox" id="update" />Update
<input type="checkbox" id="windows" />Windows

- Sandeep Nayak

Answer 5

这是让它按我的想法工作的代码。它并没有使用CSS来隐藏指南，但是当复选框被选中和取消选中时，它会隐藏和显示它们。现在对我来说已经足够好了！非常感谢 @Satpal!!

$(document).ready(function(){
$('#install').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.install)').hide();
    }
    else {
        $('div.guide-block:not(.install)').show();
    }
});
$('#update').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.update)').hide();
    }
    else {
        $('div.guide-block:not(.update)').show();
    }
});
$('#windows').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.windows)').hide();
    }
    else {
        $('div.guide-block:not(.windows)').show();
    }
});
});

- Dakota