How To Filter By Hiding/showing Divs With Dynamic Attributes?

Suppose I have checkboxes x, y, z and

elements with corresponding id attributes. I have products in groups of x, y, z and the groups have classes. But the clearfix clas

Solution 1:

Why not add the following attribute to your checkboxs data-target='div#' Then assign your divs ID the same value.

then with js:

$(document).on('click', '.checkboxs', function() {
var t = $(this).attr('data-target');
if(t != undefined) {
    //check if its already shown, if so hide!if($(this).attr('data-isshown')) {
        $("#"+t).hide();
        $(this).removeAttr('data-isshown')
    } else {
        $("#"+t).show();
        $(this).attr("data-isshown", true);
    }
  } 
});

Solution 2:

finally I figured it out, I loop through all checkboxes and all divs

<scripttype="text/javascript"src="http://code.jquery.com/jquery.js"></script><scripttype="text/javascript">
    $(document).ready(function(){

        $('input[type="checkbox"]').click(function(){
            var numberOfChecked = $('input:checkbox:checked').length;
            $(".clearfix").each(function(){
                var clear=$(this);
             $('input[type="checkbox"]').each(function(){
                 var variable=$(this);
                var flag=$(this).prop('checked');
                var id=$(this).val();

                if(flag)
                 {

                    if(clear.attr("value")==variable.val())
                   {
                        var id=clear.attr("value");
                        var x=document.getElementById(id);
                        x.style.display="block";
                        clear.css('display','block');

                    }

                        }
                elseif(clear.attr("value")==variable.val())
                {   var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="none";
                    clear.css('display','none');

                }
                if(!numberOfChecked)
                {
                    var id=clear.attr("value");
                    var x=document.getElementById(id);
                    x.style.display="block";
                    clear.css('display','block');
                    }
             });    //clear
        });//all checkboxes
    }); //click  
         });//ready

Solution 3:

Please forgive me if I misunderstood your question, but you can accomplish this with CSS alone using the general sibling combinator:

<inputtype="checkbox"class="box_a" /><inputtype="checkbox"class="box_b" /><divclass="box"id="a">This is a box.</div><divclass="box"id="b">This is b box.</div>

.box {
    display: none;
}

.box_a:checked ~ #a,
.box_b:checked ~ #b {
    display: block;
}

Demo: http://jsfiddle.net/jonathansampson/dXKLL/

If you're not able to control the id values, you could base the connection on nth-of-type:

.check:nth-of-type(1):checked ~ .box:nth-of-type(1),
.check:nth-of-type(2):checked ~ .box:nth-of-type(2) {
    display: block;
}

Demo: http://jsfiddle.net/jonathansampson/dXKLL/1/

If you need everything to be visible when no checkboxes are checked, you could use both the next sibling selector along with the general sibling selector:

.check:not(:checked) + .check:not(:checked) ~ .box {
    display: block;
}

This will show all .box elements that follow at least two unchecked .check elements.

Demo: http://jsfiddle.net/jonathansampson/dXKLL/2/

Share