Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Jquery e checkbox

  1. #1

    Jquery e checkbox

    Ciao a tutti, sto studiando da poco jquery e ho realizzato uno dei miei primi script di prova che sembra funzionare in modo abbastanza soddisfacente:
    - se seleziono una delle checkbox "K", mi seleziona anche la "P" principale;
    - se deseleziono la "P" principale, deseleziona tutte le altre.

    Questo script mi serve per la compilazione di un questionario e devo fare in modo che deselezionando l'elemento principale "P", mi si vengano deselezionate tutte le risposte ("K").

    La sintassi è corretta? si può fare di meglio con un codice più pulito e semplice?

    codice:
    <div>
    <input type="checkbox" class="p"> P
    
    <input type="checkbox" class="k"> F
    <input type="checkbox" class="k"> F
    <input type="checkbox" class="k"> F
    </div>
    codice:
    $('.p').click(function()
        { $('.p').prop('checked') == false ? $('.k').prop('checked', false) : ''; }
    )
    
    $('.k').click(function()
        { $('.p').prop('checked', true); }
    )

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, come per ogni problema, chiaramente puoi risolvere in mille modi diversi più o meno ottimali o puliti o sintetici. Ad ogni modo il tuo script può andare bene, la sintassi è corretta. L'unica cosa che potrebbe stonare (anche se lo script funziona comunque) è quell'operatore ternario in cui passi una stringa vuota '' che non ti serve a niente. In quel caso, per essere più elegante, potresti usare un semplice if o un operatore &&.
    Così:
    codice:
    if ($('.p').prop('checked') == false) $('.k').prop('checked', false);
    O anche così:
    codice:
    $('.p').prop('checked') == false && $('.k').prop('checked', false);
    Oltre ciò che hai indicato, ci sarebbero altre cose da considerare, che andrebbero meglio chiarite relativamente al contesto in cui adoperi questa cosa e alle tue esigenze:

    1 - Non è chiaro se quel blocco dentro il <div> possa trovarsi in maniera ripetuta all'interno della pagina. Cioè, se si possano trovare più gruppi di elementi .p e .k sulla stessa pagina. Se così fosse, il tuo script avrebbe una falda perché il controllo avverrebbe indistintamente su tutti gli elementi .p e .k trovati sulla pagina. A questo punto bisognerebbe capire se ti interessa ottenere un controllo relativo tra gli elementi .p e .k che appartengano allo stesso gruppo (che si trovino, ad esempio, dentro lo stesso <div> contenitore). Nel caso si dovrebbe valutare l'uso della parola chiave this (e altri metodi parentali) all'interno dell'evento click, per ottenere dei riferimenti relativi.

    2 - Hai indicato solo due eventualità per le quali eseguire il procedimento:
    - se seleziono una delle checkbox "K", mi seleziona anche la "P" principale;
    - se deseleziono la "P" principale, deseleziona tutte le altre.
    Sei sicuro non ti serva valutare anche le altre possibili eventualità?
    Ad esempio:
    - se deseleziono tutte le checkbox "K", mi deseleziona anche la "P" (dal momento che nessuna "K" risulta selezionata);
    - se seleziono la "P" (nel caso in cui tutte le "K" risultino deselezionate) allora mi seleziona tutte le "K";

    Chiaramente sono solo delle ipotesi che potrebbero risultare non valide per la tua esigenza. Devi vedere tu.

    si può fare di meglio con un codice più pulito e semplice?
    Riguardo lo script, ripeto, è possibile fare in svariati modi.
    I concetti "pulito" e "semplice", a mio parere, sono relativamente astratti.
    Giusto per provare, ho riformulato lo script che ti posto come esempio, in cui ho racchiuso tutto in un unico evento e cercato di minimizzare il più possibile il tutto. Ho aggiunto anche una condizione di relazione per il controllo degli elementi appartenenti allo stesso gruppo (come ho indicato sopra, sul punto 1).
    Chiaramente lo script è più stringato ma perde totalmente di leggibilità. Non so quanto possa essere definito "pulito e semplice":
    codice:
    $('.p,.k').change(function(){
      var e,c='checked';(e=$(this)).filter('.k:'+c+',.p:not(:'+c+')').parent().find(e.is('.k')?'.p':'.k').prop(c,e.is(':'+c));
    })
    Ultima modifica di KillerWorm; 12-10-2015 a 18:01
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Grazie mille per le delucidazioni! Il tuo script minimizzato all'osso sarebbe perfetto, ma ho ancora molto da studiare per arrivare al tuo livello per poterlo "decifrare" e gestire . Credo che al momento mi dovrò accontentare di qualche riga in più.

    Sì, sicuramente il blocco di <div> si ripeterà più volte e in effetti sto tentando (senza successo) di realizzare qualcosa di semi-universale con l'aiuto di parent(), children() e closest() mettendoli al posto dei nomi delle classi, ma non riesco a farlo funzionare. Ecco lo scarabocchio:

    codice:
    <div><input type="checkbox" class="p">P
        <div><input type="checkbox" class="k">K</div>
        <div><input type="checkbox" class="k">K</div>
        <div><input type="checkbox" class="k">K</div>
    </div>
    ...
    codice:
    $('.p').click(function()
        {
        $(this).prop('checked') == false && $(this).children('input[type="checkbox"]').prop('checked', false);
        }
    )
    
    $('.k').click(function()
        {
        $('.p').prop('checked', true);
        }
    )

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.