Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Nascondere un div con una checkbox

    Ciao a tutti ragazzi,

    Sto lavorando a questa pagina:

    https://www.gastesrl.com/checkout/

    Volevo chiedervi se esiste un modo per nascondere il div di destra quando la checkbox è disabilitata e mostrarlo quando clicco su di essa. Grazie a tutti per l'aiuto

    P.S: utilizzo wordpress e wocommerce

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, in generale per identificare un elemento checkbox non spuntato puoi usare la combinazione di due selettori CSS, cioè :not() e :checked, quindi :not(:checked).

    Per nascondere un elemento puoi usare display:none.
    Per creare una relazione tra due elementi puoi usare dei selettori tipo + (fratello adiacente) o ~ (fratello generico a seguire). Questo è possibile solo in alcuni casi in cui la linea gerarchica dei due elementi permette di creare una relazione simile.

    Sulla pagina che hai linkato non è chiaro quale è il div e il checkbox a cui ti riferisci, per cui non è semplice risponderti.

    Nel caso non fosse possibile tramite CSS, puoi comunque trovare un'alternativa usando qualche semplice riga di JavaScript.

    Eventualmente cerca di specificare meglio i dettagli.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ciao. Aggiungo dei dettagli. Vorrei che il div creato dalla lista di “nome-cognome-telefono” che si trovano sotto “spedisci a un altro indirizzo?” Compaiano solo se la casella viene cliccata. Ho controllato il codice generato e tutto il blocco è proprio un div. conoscevo le procedure che mi hai esposto ma non so come metterle insieme, per questo chiedevo

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Perdonami ma faccio fatica a capire dove stanno tutti quegli elementi sulla pagina che hai linkato. Personalmente non li vedo. Bisogna cliccare da qualche parte? Bisogna riempire il carrello o fare qualche azione particolare?
    Puoi chiarire meglio?

    EDIT: oops, ora li vedo.. scusami ma forse avevo aperto qualche altra pagina. Vedo cosa si può fare.
    Ultima modifica di KillerWorm; 23-11-2017 a 02:05
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ho visto, non è possibile intervenire solo da CSS come ti ho accennato prima; gli elementi in questione non sono "relazionabili" tra loro, ma puoi risolvere via JavaScript/jQuery.

    Sposto la discussione sul relativo forum.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Okay quindi tutto tramite js.... speravo si potesse risolvere più velocemente...

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Sì ma non è detto che non si possa fare una cosa veloce anche con JavaScript.

    Giusto per chiarire, hai una situazione del genere:
    codice:
    <h3 id="...">
         <label class="...">
             <input id="..." class="..." type="checkbox"> <span>Spedire ad un indirizzo differente?</span>
         </label>
    </h3>
    
    <div class="...">
         ...
    </div>
    Il checkbox sta dentro un label che a sua volta sta dentro un h3, mentre il div che vorresti gestire (tramite checkbox) sta dopo h3.
    Anche volendo utilizzare quella tecnica chiamata "Checkbox Hack", non è possibile creare una relazione tra il checkbox e il div, perché non rispetterebbe la peculiarità della "cascata", propria dei CSS. Non esiste infatti (attualmente) un selettore che dal checkbox risalga all'indietro verso il suo contenitore h3 e quindi raggiungere il div che è allo stesso livello di questo.

    In questo caso è necessario l'uso di JavaScript/jQuery.

    Potresti risolvere comunque in diversi modi a seconda delle tue preferenze.

    Giusto un esempio in semplice JavaScript, potresti inserire una cosa del genere direttamente sul tag <input>:
    codice:
    onchange="this.parentNode.parentNode.nextElementSibling.style.display = this.checked ? 'block' : 'none';"
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Mmmh capito capito... Proverò il metodo che mi hai consigliato sperando che possa risolvere la cosa

Tag per questa discussione

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 © 2024 vBulletin Solutions, Inc. All rights reserved.