Question

I am using jQuery for the first time (my js knowledge is poor at best) and attempting to create a Section filter (hides/shows divs depending on class) that is based around checkbox options.

To start with I was wanting to retrieve the class of each checkbox that was checked so I have something like this (the div.text is just to test the output). Each checkbox class corresponds to the class of the div (all div’s have multiple classes that match various checkboxes)

<ul>
    <li>Size</li>
    <li><input type="checkbox" class="half" />&frac12;"</li>
    <li><input type="checkbox" class="quart" />&frac34;"</li>
</ul>

<script>
    function Checked() {
        var n = $("input:checked").attr("class");
        $("div.text").text(n);
    }

    Checked();
    $(":checkbox").click(Checked);
</script>

This succesfully returns the first checked checkbox class, I toyed around with each() but don’t quite understand how to implement it, can someone point me in the right direction please?

Ultimately I’m looking for each checked checkbox class to be in an array that I can then call upon to make the corresponding divs the only visible items, but I’m happy to take this a step at a time. I’m sure this is likely to be an easier way to achieve the desired result so am also open to suggestions. Thanks in advance

Answer 1

Try this

function Checked() {
  var classes = [];
  $("input:checked").each(function(){
       classes.push($(this).attr('class'));
  });
  $("div.text").text(classes.join(','));
}
Checked();
$(":checkbox").click(Checked);

Inside the each loop this points to each of the checked checkbox element. Using this we get the class and then push it inside an array just to store all the classes and then display them using join method of the array.