Using jQuery to dynamically create checkboxes based on multiple attributes from a div

Question

I would like jQuery to create a list of checkboxes based on the class / data present in the div. In essence, these flags will be filtered through products, so when you click on a flag, products containing this tag will be displayed in their div, avoiding any repeated flags.

Example:

<div class="Shoes" data-size="Small" data-color="Black"> <h3>Nike</h3> </div> <div class="Belts" data-size="Medium" data-color="Black"> <h3>Belt</h3> </div> <div class="Shirt" data-size="Large" data-color="Blue"> <h3>Polo</h3> </div> <div class="Socks" data-size="Small" data-color="White"> <h3>Generic Socks</h3> </div> 

Expected Result Class Type

• footwear
• Belts
• shirt
• Socks

The size

• Small
• Medium
• Large

Color

• The black
• White
• blue

Each flag should be able to hide / show the element.

Jsfiddle

The code I have so far is a search for / previous answers, however it only creates 1 type of checkbox, which is for the "class", and not for creating a few.

Answer 1

Try

 jQuery(function ($) { function createCheckboxes($els, attr) { var props = {}; $els.each(function () { props[$(this).attr(attr)] = true; }); return $.map(props, function (val, key) { var $chk = $('<input />', { type: 'checkbox', value: key }) return $('<label />', { text: key }).append($chk) }) } $('span').append(createCheckboxes($('div'), 'class')) $('span').append(createCheckboxes($('div'), 'data-size')) $('span').append(createCheckboxes($('div'), 'data-color')) }); 

Demo: Fiddle

Answer 2

Try http://jsfiddle.net/LzmTA/1/

HTML

 <div class="Shoes" data-size="Small" data-color="Black"> <h3>Nike</h3> </div> <div class="Belts" data-size="Medium" data-color="Black"> <h3>Belt</h3> </div> <div class="Shirt" data-size="Large" data-color="Blue"> <h3>Polo</h3> </div> <div class="Socks" data-size="Small" data-color="White"> <h3>Generic Socks</h3> </div> 

Javascript

 $(document).ready(function(){ var goods = {}; var divs = $('div'); for(var i = 0; i < divs.length; i++){ var attributes = divs[i].attributes; var item = {}; for(var j = 0; j < attributes.length; j++){ var attrName = attributes[j].name; if(!goods[attrName]){ goods[attrName] = {}; } goods[attrName][attributes[j].value] = 1; } } printAttributes(goods); console.log(goods); }); function printAttributes(goods){ for(var group in goods){ var groupTitle = $('<h3>').text(group); $('span').append(groupTitle); for(var item in goods[group]){ console.log(item); var sp = $('<label>').text(item); var chk = $('<input>').attr('type', 'checkbox').attr('value', item).attr('attr', group); chk.bind('change', function(){ filterGoods(); }); $('span').append(chk).append(sp); } } } function filterGoods(){ var separator = '|'; var chks = $('input[type=checkbox]:checked'); var filter = []; //get filter for(var i = 0; i < chks.length; i++){ var item = $(chks[i]).attr('attr') + separator + $(chks[i]).val(); filter.push(item); } //do filter var hasAttr = false; var divs = $('div'); for(var i = 0; i < divs.length; i++){ hasAttr = false; for(var j = 0; j < filter.length; j++){ var filterParts = filter[j].split(separator); if($(divs[i]).attr(filterParts[0]) == filterParts[1]){ hasAttr = true; continue; } } hasAttr ? $(divs[i]).show() : $(divs[i]).hide(); } console.log(filter); }