JQuery, select custom data-attr

[incaz]

Ik probeer een checkbox tree na te bouwen, dus dat je klikt op een parent waarna de children geselecteerd worden. Het punt is echter dat de tree niet bestaat uit netjes geneste lists (en dus niet echt uit parents en children), maar gewoon uit een platte verzameling met het niveau opgeslagen als custom data-attr.

HTML:

<label data-level=$level><input type="checkbox"></label>

Het probleem is echter dat je niet kunt selecteren op een numerieke waarde, voor gebruik in bv nextUntil().
Wat ik naief zou willen is ongeveer

JavaScript:

level = $(this).data('level');
selected = $(this).prop('checked');
$(this).nextUntil( ["data-level"]<= level ).prop('checked', selected );

http://jsfiddle.net/rSBSQ/1/ maar dat werkt dus niet.

Leuke theorie, maar dat kan dus niet. filter() wordt als alternatief genoemd, maar die filtert de elementen al voor de nextUntil wordt toegepast, zodat als je op de eerste 2 klikt, alle drietjes geselecteerd worden, ook de laatste. In de gefilterde set zit niets meer dat het einde van de nextUntil kan triggeren.

Wie oh wie kan me helpen?

[RM-rf]

waarom niet gebruik maken van HTML en DOM en nesten van elementen zoals dit ook bedoelt is...

HTML:

<ul>
    <li><label><input type="checkbox" /> Level 1 </label>
    <ul>
         <li><label><input type="checkbox" /> Level 2</label>
         <li><label ><input type="checkbox" /> Level 2</label>
         <ul>
            <li><label ><input type="checkbox" /> Level 3</label>  
         </ul>  
         <li><label><input type="checkbox" /> Level 2</label>
         <ul>
            <li><label ><input type="checkbox" /> Level 3</label>  
         </ul>  
    </ul>
    <li><label><input type="checkbox" /> Level 1</label>
</ul>

deze code kun je gewoon met standaard selectors doorlopen en alle childelementen die vallen onder de eerste parent-LI van het input element ook selecteren

JavaScript:

$(this).parent("li").children("li input").prop('checked', selected );

[ Voor 5% gewijzigd door RM-rf op 03-05-2013 19:47 ]

[incaz]

Geneste lists maken het inderdaad een stuk eenvoudiger, maar dat is op dit moment niet de eerste keuze. (Onder andere omdat het genereren van die structuur in dit geval ook gecompliceerd is.)

Ik ben erg benieuwd naar de JQuery-oplossing, ook al omdat ik nu gewoon wil weten hoe het kan

[m4ikel]

Je zult in iedergeval moeten zorgen dat je een ID/Parent structuur krijgt bv. zoals ik hieronder heb neer gezet.

code:

<label data-id="0" data-parent="0"><input type="checkbox">0</label>
<label data-id="1" data-parent="0"><input type="checkbox">1</label>
<label data-id="2" data-parent="1"><input type="checkbox">2</label>
<label data-id="3" data-parent="1"><input type="checkbox">3</label>
<label data-id="4" data-parent="0"><input type="checkbox">4</label>

Daarna moet je met de volgende code wel aardig in de goede richting komen.

code:

$('input[type=checkbox]').change
(
    function()
    {
        var $this = $(this);
        var $label = $this.parent('label');
        var id = $label.data('id');
        
        $('label[data-parent='+id+']').css('background','red');
    }
);

Succes!

[incaz]

Thanks m4ikel. In de opzet die jij hebt kan het nog niet omgaan met meerdere niveau's van nesting, maar ik roep nu recursief de change() aan en dat doet wat ik wil:

JavaScript:

$('#tree label').change( function(){    
    var selected = $(this).find('input').prop('checked');
    var id = $(this).find('input').attr('value');
    $('#tree label[data-parent='+id+']').find('input').prop('checked', selected ).change();
});

http://jsfiddle.net/rSBSQ/2/