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

WmbertSea

Utente Attivo
28 Nov 2014
159
21
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

Utente Attivo
28 Nov 2014
159
21
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>