dimanche 1 janvier 2017

Add class to all other divs when checkbox is selected

I am trying to create a sorting script to a small guides list. So the idea is that my div tags will have describing classes attached to them such as:

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

The "windows, update and install" are the "describing" classes that will only be used for sorting purposes. A list with checkboxes on the side will allow the users to select the checkboxes that are relevant to what they need to find. Example:

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

The user selects the boxes relevant to their search and the divs that don't have a class that has been selected from the checkboxes will then have a class added with display: none; inside. This will make the irrelevant guides disappear (in theory).

I'm relatively new to java and jquery so I'm not sure what I am doing. I've pieced together script from other similar questions from this site to try and make the code I need. I've gotten the code to somewhat work. It will make the div that has the matching checkbox disappear when checked. I want the opposite. I want the divs that don't have that checked checkbox to disappear. And if I have a div with UPDATE and INSTALL on it, I need the code to recognize it has one selected and still stay. Because right now, if the div has both and I select one, it disappears because the other wasn't selected.

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

Any help would be appreciated. Send me a guide on how to do it, whatever. I'm willing to learn this but I'm hitting a wall with my own knowledge and google search isn't understanding. Although, I'm not really sure what I'm looking for ha.




Aucun commentaire:

Enregistrer un commentaire