javascript - Using jQuery to dynamically create checkboxes based on multiple attributes from div - Stack Overflow

admin管理员组

文章数量:1420197

I would like for jQuery to dyanmically create a list of checkboxes based on the class/data present in divs. Essentially these checkboxes will filter through the products so that clicking a checkbox will show the products containing that tag in their div while avoiding any duplicate checkboxes.

Sample:

<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 output Class Type

• Shoes
• Belts
• Shirt
• Socks

Size

• Small
• Medium
• Large

Color

• Black
• White
• Blue

Each checkbox needs to be able to hide/show the item.

JsFIDDLE

The code I have so far is from searching around/previous answers, however it is only creating 1 checkbox type which is for "class" and not creating multiple ones.

I would like for jQuery to dyanmically create a list of checkboxes based on the class/data present in divs. Essentially these checkboxes will filter through the products so that clicking a checkbox will show the products containing that tag in their div while avoiding any duplicate checkboxes.

Sample:

<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 output Class Type

• Shoes
• Belts
• Shirt
• Socks

Size

• Small
• Medium
• Large

Color

• Black
• White
• Blue

Each checkbox needs to be able to hide/show the item.

JsFIDDLE

The code I have so far is from searching around/previous answers, however it is only creating 1 checkbox type which is for "class" and not creating multiple ones.

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Aug 29, 2013 at 5:03 Arturs 1,25455 gold badges2121 silver badges2828 bronze badges asked Aug 29, 2013 at 3:31 Dillon1998Dillon1998 5111 silver badge33 bronze badges 6

• 1 You suddenly changed your question after we took the time trying to help you :) – Roko C. Buljan Commented Aug 29, 2013 at 3:54
• You were first asking to have a checkbox, now you want a dropdown with all the retrieved data, is that right? – Roko C. Buljan Commented Aug 29, 2013 at 3:58
• Sorry I accidentally typed dropbox instead of checkbox. – Dillon1998 Commented Aug 29, 2013 at 4:03
• Still...you have edited the question multiple times over the past half an hour. I was also trying to help you.....but not anymore.. – 2pha Commented Aug 29, 2013 at 4:05
• 1 @2pha I also lost my inspiration on this Q – Roko C. Buljan Commented Aug 29, 2013 at 4:06

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

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

Try this http://jsfiddle/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);
}

本文标签：