Onclick Jquery

[tom_swinkels]

Beste,

Ik ben bezig met een Categoriën script.
De bedoeling is minimaal 1 selectie of ALL aan. Zoals: http://newspulse.cnn.com/

Het is nu ook mogelijk om alles uit te hebben staan..

Hoe kan ik dit oplossen?

code:

function showNieuws(){
    $("input:checkbox:checked").each(function(){
        var cb_value = $(this).val();
        if(cb_value == "all"){
            $('.topic').attr('checked', false);
            $('.topic.alltopic').attr('checked', true);
        } else if(cb_value == "") {
            $('.topic.alltopic').attr('checked', false);
        }
    });
    
    var ids = "";
    $("input:checkbox:checked").each(function(){
        var idtopic = $(this).val();
        ids = ids + idtopic + ';';
    });

    $('#get_Nieuws').load('ajax_post.php', {topics: ids});
}

$(document).ready(function(){
    $('.topic.alltopic').attr('checked', true);
    var ids = "";
    $("input:checkbox:checked").each(function(){
        var idtopic = $(this).val();;
        ids = ids + idtopic + ';';
    });

    $('#get_Nieuws').load('ajax_post.php', {topics: ids});
    $(":checkbox").click(showNieuws);
    
    showNieuws();
    
    $(":checkbox").click(showNieuws);
});

[Manuel]

Laat ik maar eens beginnen voordat een ander het zegt. Maar wat heb je inmiddels zelf al opgezocht en waar denk je dat het probleem kan zitten..

Verder zou ik je de oplossing geven. Kijk hoeveel id's / classes er actief zijn en dan als gelijk is aan 0 klik jij 'ALL' aan.

JavaScript:

$(function() { //document ready
         if($("input[type='checkbox']:checked").length == 0) { //Als er niets is aangeklikt..
                 //Hier je code om hem aan te vinken?
         }

         //Doe hier de rest?
});

[Caelorum]

Als je de oplossing gaat geven heeft het toch ook geen zin meer om te klagen over zijn inzet?
Daarnaast kan de gebruiker nu toch alsnog uitvinken?

[Manuel]

Het is niet de gehele oplossing natuurlijk, heb expres even een gedeelte weggesnipt dat de gebruiker ook zelf iets kan gaan doen. Liet alleen even zien hoe je kan tellen hoeveel je dan in 'de array (jQuery object)' zit.

[tom_swinkels]

Het lijkt er op dat het wel een stuk beter word.

Nu heb ik het probleem dat je ALL niet uit kunt zetten dat is natuurlijk ook goed, maar wanneer ik een andere categorië aan klik moet ALL natuurlijk uit en die andere categorië moet dan aan gaan.

Dat is mij nog niet gelukt:

code:

$(document).ready(function(){
    $('.topic.alltopic').attr('checked', true);
        var ids = "";
        $("input:checkbox:checked").each(function(){
            var idtopic = this.value;
            ids = ids + idtopic + ';';
        });

        $('#get_Nieuws').load('ajax_post.php', {topics: ids});
        $(":checkbox").click(showNieuws);
    function showNieuws()
    {
        if($("input[type='checkbox']:checked").length == 0) { //Als er niets is aangeklikt..
            $('.topic.alltopic').attr('checked', true);
        }

        $("input:checkbox:checked").each(function(){
            if(this.value == "all")
            {
                $('.topic').attr('checked', false);
                $('.topic.alltopic').attr('checked', true);
            }
            else if(this.value == "")
            {
                $('.topic.alltopic').attr('checked', false);
            }
        });

        var ids = "";
        $("input:checkbox:checked").each(function(){
            var idtopic = this.value;
            ids = ids + idtopic + ';';
        });

        $('#get_Nieuws').load('ajax_post.php', {topics: ids});
    }
    $(":checkbox").click(showNieuws);
});

[Creepy]

En wat heb je dan al allemaal geprobeerd en wat lukte er niet mee? Je dumpt nu voor de twee keer in dit topc een lap code en je geeft aan wat er moet gebeuren en hoopt dat wij het voor je gaan oplossen. En dat is nu net niet de bedoeling Geef nu eens aan wat je zel fal hebt geprobeerd i.p.v. alleen maar te zetetn "dat is mij nog niet gelukt". Blijkbaar heb je dus wel het 1 en ander al geprobeerd, maar wast dan precies?

[Manuel]

@Creepy
@tomo-dj Doe eens een kijkje in de jQuery documentatie in plaats van alles hier dumpen en denken dat wij even code gaan zitten voor te kauwen. http://api.jquery.com is de link naar de documentatie.

[tom_swinkels]

Oke, het is ook niet de bedoeling dat er meteen een oplossing komt. Maar dat ik er zelf ook nog wat van leer. Maar omdat ik een beginnende JavaScripter ben is het soms nog even ingewikkeld.

Wat ik geprobeerd heb ik de True / False proberen te veranderen. Want daar heeft het toch mee te maken ik zat zelf te denken aan wanneer een andere Categorië dan ALL word aangeklikt dat die op True moet en ALL op false?

[Manuel]

Het werkt eigenlijk heel simpel zoals je zelf nu ook al zegt. Wordt er 1 gechecked haal het attribuut checked weg, die selecteert hem namelijk. Wat je nu doet is ook nog eens incorrecte XHTML aangezien checked="checked" is en geen boolean value voor zover ik weet.

Maar jQuery heeft hier genoeg oplossingen voor dacht ik. (removeAttr & attr bijv)

Als checkbox = checked laat 'ALL' dan uitgaan, hoe denk je dat dan kan worden gedaan. Ik neem aan dat je mijn IF statement klakkeloos hebt overgenomen zo aan je code te zien. Als length 0 is vinkt die hem aan, rara wat mist er.

[tom_swinkels]

Oke, wanneer ik nu dus:

code:

            $('.topic').attr('checked', false);
            $('.topic.alltopic').attr('checked', true);

Weg haal kan ik wel andere vakken selecteren, dan kan ik ALL wel uitzetten en wanneer ik dan geen Categoriën meer aan vink springt hij weer terug op ALL dus dat is al goed.
Wat ik nu nog moet doen ik dus zorgen dat wanneer iemand op een andere Categorië klikt ALL uit gaat..

[tom_swinkels]

EDIT!
Er zit nog een klein foutje in zag ik net: wanneer je nu een andere categorië geselecteerd hebt kunt je nu niet meer op ALL klikken je moet dan eerst alles uit vinken en dan gaat ALL wel aan. Dat is dus nog niet helemaal goed.

Code : Ik dacht zelf aan: $('.topic.alltopic').removeAttr("disabled") maar dat gaat natuurlijk niet werken want er word geen disabled uitgevoerd? Er word alleen een Checked uitgevoerd?

code:

function showNieuws(){
    if($("input:checkbox:checked").length == 0) { //Als er niets is aangeklikt..
        $('.topic.alltopic').attr('checked', true); //Nu zet hij ALL aan want er is niks aangeklikt..
    } else if($("input:checkbox:checked").length != 0) { //Als er iets is aangeklikt..
        $('.topic.alltopic').attr('checked', false); //Nu zet hij ALL uit want er is iets aangeklikt..
        $('.topic.alltopic').removeAttr("disabled") //Nu gaan we zorgen dat je ALL nog wel kunt aanklikken..
    }

    var ids = "";
    $("input:checkbox:checked").each(function(){
        var idtopic = $(this).val();
        ids = ids + idtopic + ';';
    });

    $('#get_Nieuws').load('ajax_post.php', {topics: ids});
}

$(document).ready(function(){
    showNieuws();
    $(":checkbox").click(showNieuws);
});

[ Voor 39% gewijzigd door tom_swinkels op 20-02-2010 20:15 ]

[tom_swinkels]

Iemand die nog enig ideé heeft met elke functie is dit wel kan oplossen? Of wat ik fout doe?

[crisp]

Manuel schreef op zaterdag 20 februari 2010 @ 14:57:
Het werkt eigenlijk heel simpel zoals je zelf nu ook al zegt. Wordt er 1 gechecked haal het attribuut checked weg, die selecteert hem namelijk. Wat je nu doet is ook nog eens incorrecte XHTML aangezien checked="checked" is en geen boolean value voor zover ik weet.

In de DOM is het wel degelijk een boolean attribuut

[Manuel]

crisp schreef op zondag 21 februari 2010 @ 23:00:
[...]

In de DOM is het wel degelijk een boolean attribuut

Dat wist ik nog niet, las namelijk op W3Schools dat het per string werd afgehandeld. Dom van me dat ik niet even op W3 heb gekeken.

@tomo-dj:
Het is alleen een kleine kwestie nog van debuggen waarom hij dit gedrag vertoont. Zie ook: Programming FAQ - Algemeen

[tom_swinkels]

Manuel schreef op maandag 22 februari 2010 @ 01:39:
[...]

Dat wist ik nog niet, las namelijk op W3Schools dat het per string werd afgehandeld. Dom van me dat ik niet even op W3 heb gekeken.

@tomo-dj:
Het is alleen een kleine kwestie nog van debuggen waarom hij dit gedrag vertoont. Zie ook: Programming FAQ - Algemeen

Hoe je moet debuggen snap ik nog niet helemaal. Aangezien er bij mijn weten niets fout is aan de code? Maar ik denk eerder dat ik er een andere functie voor moet gaan gebruiken?

Dan heb ik het over: $('.topic.alltopic').attr('checked', true);

?

[MueR]

tom_swinkels schreef op maandag 22 februari 2010 @ 10:18:
Hoe je moet debuggen snap ik nog niet helemaal. Aangezien er bij mijn weten niets fout is aan de code?

Nou, lees Programming FAQ - Algemeen nog eens door, of [google=how to debug javascript], om maar iets te noemen. Debuggen is heel simpel. Zorg dat je, op elk moment in een functie, weet wat er gebeurd. Wordt je functie wel echt aangeroepen (bijvoorbeeld via alert() te controleren), staan er de waarden in die je verwacht, bestaan de elementen waaraan je refereert wel in je DOM en meer van dat.

[tom_swinkels]

Oke, ik heb even met Alert gekeken.
Bij het openen van de pagina: Alert 1
Bij het aanklikken van een categorië Alert 3
Bij het uitvinken van alle categorië Alert 1 en word ALL geselecteerd.
Wanneer een categorië geselecteerd is en je klikt dan op ALL Alert 3

Daar zit dus ook de fout? Dat wil dit volgensmij betekeken dat wanneer er een Categorië geselecteerd is dat hij alles als een Categorië ziet?

code:

function showNieuws(){
    if($("input:checkbox:checked").length == 0) { //Als er niets is aangeklikt..
        $('.topic.all').attr('checked', true); //Nu zet hij ALL aan want er is niks aangeklikt..
        alert('1');
    } else if($(".topic.all").onclick) {
        $('.topic.all').attr('checked', true);
        alert('2');
    } else {
        $('.topic.all').removeAttr("checked"); //Nu zet hij ALL uit want er is iets aangeklikt..
        alert('3');
    }

    var ids = "";
    $("input:checkbox:checked").each(function(){
        var idtopic = $(this).val();
        ids = ids + idtopic + ';';
    });

    $('#get_Nieuws').load('ajax_post.php', {topics: ids});
}

$(document).ready(function(){
    showNieuws();
    $(":checkbox").click(showNieuws);
});

[tom_swinkels]

Iemand die me nog verder kan helpen?

[Tharulerz]

Ik denk dat de goodwill een beetje weg is omdat je gewoon lappen code blijft dumpen op het forum, en verwacht dat wij het oplossen.

Post enkel relevante code, zeg wat er PRECIES fout gaat, toon eventueel een demo site, en doe (of geef ons toch die indruk) zelf eerst wat moeite voor je hier post.

[tom_swinkels]

Oke, sorry..

Ik heb momenteel een online voorbeeld: http://www.siris.nl/jquery/index.php
Wat gaat er fout: Wanneer je dus een Categorië aanklikt krijg je dus het nieuws uit alleen die Categorië te zien, dat is goed!

Maar wanneer je nu op ALL klikt zou eigelijk alles uitmoeten behalve ALL en zou je alles weer te zien moeten krijgen..

Dit lukt me steeds maar niet, omdat hij waneer een Categorië aangeklikt staat ALL blokeerd. Is dit tegen te gaan?

code:

    if($("input:checkbox:checked").length == 0) { //Als er niets is aangeklikt..
        $('.topic.all').attr('checked', true); //Nu zet hij ALL aan want er is niks aangeklikt..
    } else {
        $('.topic.all').removeAttr("checked"); //Nu zet hij ALL uit want er is iets aangeklikt..
    }

[iivvvii]

code:

if($(this).attr('value') == 'all'){
      //doe wat anders dan normaal?
}

[tom_swinkels]

Inderdaad, hier had ik nog niet aan gedacht..
Het is me nu wel gelukt.

Bedankt allemaal!