Question

My question is how do I use the jquery find(), to find the correct listitems based on my checked checkboxes? I have tried building the string dynamicly but it does not work…?!

Is there an easier way?

I several listitems and a couple of checkboxes marked up like this.

 <li class="item" data-id="2" data-type="Bokföringsprogram" operativsystem='Windows' >
 <li class="item" data-id="2" data-type="Bokföringsprogram" operativsystem='Windows' operativsystem='MAC OS' >
 <li class="item" data-id="67" data-type="Faktureringsprogram" operativsystem='Windows'   operativsystem='MAC OS' >

<li><input type="checkbox" name="boxvalidator" value="Windows" />Windows<br /></li>
<li><input type="checkbox" name="boxvalidator" value="MAC OS" />MAC OS<br /></li>
<li><input type="checkbox" name="boxvalidator" value="Ubuntu" />Ubuntu<br /></li>
<li><input type="checkbox" name="boxvalidator" value="Linux" />Linux<br /></li>

Jquery code

$('input:checkbox[name="boxvalidator"]:checked').each(function() 
{ 
$boxchecked = $boxchecked + ",li[operativsystem=~" + $(this).attr('value') +  "],";
});

var $filteredPortfolio = $portfolioClone.find($boxchecked);

String looks like this:
undefined,li[operativsystem=~Windows],,li[operativsystem=~MAC OS],

must be an easier way of doing this?

Cheers & thanks for reading all the way down here!

Answer 1

From this:

String looks like this: undefined,li[operativsystem=~Windows],,li[operativsystem=~MAC OS],

it looks like you probably want to set $boxchecked = '' at some point outside that function. Alternatively, you could do something like the following to avoid the extra commas:

$('input:checkbox[name="boxvalidator"]:checked').each(function() 
{
    if (typeof $boxchecked !== 'undefined') {
        $boxchecked = $boxchecked + ",";
    }
    else {
        $boxchecked = "";
    }
    $boxchecked = $boxchecked + "li[operativsystem=~" + $(this).attr('value') +  "]";
});

That being said, @veblock’s solution looks like a better way of getting what you want.