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.
