Option filter in jQuery

There is data associated with certain items in a list for example below shows data added to one item using jQuery, the first one:

$('ul li :first').data('job', 'Developer');
$('ul li :first').data('company', 'Microsoft');开发者_高级运维
$('ul li :first').data('location', 'UK');

Where job, data, location all have check-boxes the user can select from for example:

<label>
    Developer<input type="checkbox"/>
</label>
<label>
    Tester<input type="checkbox"/>
</label>
<label>
    Lead Developer<input type="checkbox"/>
</label>
<label>
    Google<input type="checkbox"/>
</label>
<label>
    Microsoft<input type="checkbox"/>
</label>
<label>
    UK<input type="checkbox"/>
</label>
<label>
    US<input type="checkbox"/>
</label>

Initially all the items in the list are shown. When a user selects a check-box all items in the list that do not have that attribute are hidden.

Does anyone know an approach I can take with this where there are multiple options in job, company and location?

If you look at jQuery data() documentation you will see that value can be any Javascript type including Array or Object.

So you can do:

$('ul li:first').data('job', ['Developer', 'Cleaner', 'Cook', 'Time waster']);

or

$('ul li:first').data([{
  job: "Developer",
  company: "Microsoft",
  location: "UK"
},{
  job: "Manager",
  company: "Freelance",
  location: "Moon"
}]);

You can then add push members to array.

$('#my_checkbox').check(function(){
    $('ul li:first').data("job").push($(this).value());
});

Or add elements to hash, or do whatever you want with data structure you choose.