Problema con visibility e radio button

MattiaCapasso

Nuovo Utente
5 Mar 2020
1
0
1
Salve a tutti, ho questo piccolo problema che non riesco a risolvere con il radio button.
In poche parole voglio che quando clicco sul radio button "Altro" mi escano altri 2/3 radio button in modo ISTANTANEO (pane, vino), sempre radio button e non button!!!
Nella prima foto di vede che "vino" e "pane" non si nascondono insieme al bottone e nella seconda foto quando clicco su "Altro" mi spunta solo 1 radio button...
Codice:
<html>
<head>
<style>
#si
{
visibility:hidden;
}
</style>
</head>
<body style="text-align: center;">
<input type="radio" name="" onclick='document.getElementById("si").style.visibility = "visible"'>Altro</input> <br>
<input type="radio" name="" id="si">Vino</input> <br>
<input type="radio" name="" id="si">Pane</input> <br>

</body>
</html>

Vi ringrazio in anticipo!
 

Allegati

  • numero1.png
    numero1.png
    1,2 KB · Visite: 309
  • numero2.png
    numero2.png
    1,2 KB · Visite: 316

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Ciao, non è possibile risponderti in maniera semplice, bisogna chiarire vari punti. Nel tuo esempio ci sono diversi errori di fondo sia a livello di codice html, sia a livello di logica del funzionamento.

1 - Il tag <input> è un tag tecnicamente detto "vuoto", cioè non va usata la coppia di tag per apertura e chiusura (e tra i quali è possibile inserire del contenuto) ma va usato un unico tag in cui la chiusura è insita. La forma base in html è semplicemente <input> (in cui possono essere indicati eventuali opportuni attributi). In xhtml si dovrà specificare la chiusura con uno slash finale <input />.

Il tag di chiusura che hai usato tu (</input>) non è valido a livello di html, quindi sarà semplicemente escluso durante la fase di parsing del codice. Ovviamente il testo che hai messo dopo quei tag <input> (che si "auto-chiudono") non fa parte degli stessi. Per questo motivo il visibility:hidden che hai applicato non ha alcun effetto sul testo che segue quegli elementi.

In genere per applicare un "etichetta" agli elementi di un form, si utilizza il tag <label>. Questo può avere due sintassi: inserendo l'elemento e il testo tra i tag di apertura è chiusura in questo modo <label><input type="radio">Etichetta</label>, oppure usando l'attributo for che crea una associazione con l'elemento che ha un id corrispondente, in questo modo <input type="radio" id="foo"><label for="foo">Etichetta</label>

A questo punto, per nascondere tali elementi dovrai applicare il css al solo label, nel primo caso (perché questo contiene sia l'input, sia il testo), o ad entrambi input e label, nel secondo caso (perché sono due elementi separati).

2 - Gli ID devono essere univoci nello stesso documento, non puoi utilizzare ID con lo stesso valore. Infatti getElementById seleziona solo il primo e unico elemento che viene trovato con l'ID specificato. Questo è il motivo per cui ti compare solo il primo elemento radio. Anche se il css, col selettore ID, viene applicato comunque a tutti gli elementi con quell'ID, a livello di script questo è un errore .

In alternativa puoi usare CLASS, che a differenza di ID può avere uno stesso valore per più elementi, ma in questo caso andranno valutate varie cose affinché il sistema possa funzionare.

3 - L'uso di un radio button per far comparire ulteriori elementi radio, che appartengono ad uno stesso gruppo, può comportare dei conflitti a livello funzionale. Il funzionamento di un gruppo di radio button (contrassegnati da uno stesso name) infatti prevede la selezione di uno solo degli elementi di tale gruppo.

Nel tuo esempio non è molto chiara la panoramica perché hai lasciato vuoto il name di tali elementi (che dovrebbe definirne un gruppo di appartenenza). Ipotizzando che il radio "Altro" appartenga allo stesso gruppo degli elementi che andranno a comparire, stai comunque impostando la scelta "Altro" al apri delle altre scelte "Vino" e "Pane" che appartengono allo stesso guppo, per cui è possibile selezionare una sola fra queste 3 voci. In questo modo però stai permettendo che la stessa voce "Altro" possa essere considerata come una scelta da parte dell'utente, e nel caso in cui venga selezionata saranno automaticamente deselezionate le altre scelte dello stesso gruppo. Non mi pare un comportamento corretto a livello di logica di funzionamento.

Suppongo inoltre che nello stesso gruppo ci debbano essere degli altri radio sempre visibili, per cui la voce "Altro" debba essere considerata solo come una funzione "toggle" e non come vera e propria opzione da poter scegliere.

In base a questo, vedrei più appropriato l'uso di un checkbox, che funzioni come toggle, o di un semplice elemento cliccabile che vada a mostrare le altre opzioni, in modo che questo non sia considerato come un'opzione selezionabile, valida come dato di compilazione dell'eventuale form, ma un elemento dell'interfaccia del form. A meno che tu non voglia considerare anche tale voce come dato selezionabile del form.

Venendo al dunque posto un esempio in cui utilizzo un semplice <span> cliccabile che funziona da pulsante per estendere il relativo contenitore dove sono presenti le ulteriori scelte. Utilizzo un <div> come contenitore per facilitare l'intera gestione dell'effetto comparsa/scomparsa e l'applicazione di altre eventuali formattazioni via css. Utilizzo delle class e dei riferimenti relativi così che sia comunque possibile applicare questa stessa funzionalità a una o più istanze, qualora ce ne fosse bisogno.

Qui il codice di esempio:
HTML:
<!doctype html>
<html>
   <head>
      <title>Esempio "mostra altro"</title>
      <style>
         .toggle-button{
            color: #080;
            background: #eee;
            padding: 2px 8px;
            cursor: pointer;
         }
         .toggle-button::before{
            content: "▼";
            font-size: .5em;
            margin-right: 1em;
         }
         .toggle-button:not(.open):hover{
            color: #5b5;
         }
         .toggle-container{
            margin-left: 8px;
            overflow: hidden;
            display: none;
         }
         .toggle-button.open + .toggle-container{
            display: block;
         }
      </style>
   </head>
   <body>
      <form>
         <fieldset><legend>Vivanda</legend>
            <label><input type="radio" name="vivanda">Patate</label><br>
            <label><input type="radio" name="vivanda">Formaggio</label><br>
            <label><input type="radio" name="vivanda">Acqua</label><br>
            <span class="toggle-button">Altro</span>
            <div class="toggle-container">
               <label><input type="radio" name="vivanda">Vino</label><br>
               <label><input type="radio" name="vivanda">Pane</label><br>
               <label><input type="radio" name="vivanda">Pesce</label><br>
            </div>
         </fieldset>
         <fieldset><legend>Mezzo</legend>
            <label><input type="radio" name="mezzo">Aereo</label><br>
            <label><input type="radio" name="mezzo">Nave</label><br>
            <label><input type="radio" name="mezzo">Treno</label><br>
            <span class="toggle-button">Altro</span>
            <div class="toggle-container">
               <label><input type="radio" name="mezzo">Taxi</label><br>
               <label><input type="radio" name="mezzo">Carsharing</label><br>
            </div>
         </fieldset>
      </form>
      <script>
         var togs = document.querySelectorAll('.toggle-button'), i;
         for (i = 0; i < togs.length; ++i){
            togs[i].addEventListener('click', clickToggleButton);
         }
         function clickToggleButton(){
            this.classList.add('open');
         }
      </script>
   </body>
</html>

Se hai bisogno di ulteriori chiarimenti chiedi pure.
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Un'alternativa può essere quella di usare i tag <details> <summary> di html5.
Questi elementi forniscono proprio la funzionalità del toggle permettendo di estendere/ridurre il relativo contenuto.

In questo caso la personalizzazione a livello funzionale è limitata. Tuttavia l'impostazione è più semplice perché non si richiede l'uso ne di javascript ne tanto meno di css (se non per formattare i vari elementi).

Attualmente questi tag sono supportati da tutti i recenti browser, giusto qualche vecchia versione potrebbe non supportarli ma in tal caso i contenuti saranno mostrati comunque normalmente come già estesi.

Qui lo stesso esempio con queste funzionalità (vedi se può esserti utile):
Codice:
<!doctype html>
<html>
   <head>
      <title>Esempio "mostra altro"</title>
      <style>
         details.mostra-altro > summary{
            color: #080;
            background: #eee;
            padding: 2px 8px;
            cursor: pointer;
         }
         details.mostra-altro > summary:hover{
            color: #5b5;
         }
         details.mostra-altro > div{
            margin-left: 8px;
         }
      </style>
   </head>
   <body>
      <form>
         <fieldset><legend>Vivanda</legend>
            <label><input type="radio" name="vivanda">Patate</label><br>
            <label><input type="radio" name="vivanda">Formaggio</label><br>
            <label><input type="radio" name="vivanda">Acqua</label><br>
            <details class="mostra-altro">
               <summary>Altro</summary>
               <div>
                  <label><input type="radio" name="vivanda">Vino</label><br>
                  <label><input type="radio" name="vivanda">Pane</label><br>
                  <label><input type="radio" name="vivanda">Pesce</label><br>
               </div>
            </details>
         </fieldset>
         <fieldset><legend>Mezzo</legend>
            <label><input type="radio" name="mezzo">Aereo</label><br>
            <label><input type="radio" name="mezzo">Nave</label><br>
            <label><input type="radio" name="mezzo">Treno</label><br>
            <details class="mostra-altro">
               <summary>Altro</summary>
               <div>
                  <label><input type="radio" name="mezzo">Taxi</label><br>
                  <label><input type="radio" name="mezzo">Carsharing</label><br>
               </div>
            </details>
         </fieldset>
      </form>
   </body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18
grgfede Problema javascript con aruba Javascript 1

Discussioni simili