Aiuto nella programmazione, risposte alle domande / Javascript / Gruppi di pulsanti di opzione Multipe - javascript, jquery, html

Gruppi pulsanti Multipe radio: javascript, jquery, html

Ho questa forma:

<div id="div1">
<form>
<input type="radio" name="r1" id="r1" value="r1 value 1" />
<input type="radio" name="r1" id="r1" value="r1 value 2" />
<input type="radio" name="r1" id="r1" value="r1 value 3" />

<input type="radio" name="r2" id="r2" value="r2 value 1" />
<input type="radio" name="r2" id="r2" value="r2 value 2" />
<input type="radio" name="r2" id="r2" value="r2 value 3" />

<input type="radio" name="r3" id="r3" value="r3 value 1" />
<input type="radio" name="r3" id="r3" value="r3 value 2" />
<input type="radio" name="r3" id="r3" value="r3 value 3" />
</form>
</div>

Il numero di gruppi di pulsanti di opzione è modificabile.

Come posso deselezionare qualsiasi altro pulsante di opzione una volta che l'utente finale seleziona un pulsante di opzione in un determinato gruppo, perché attualmente seleziono r1 valore 1 e quindi selezionare r3 valore 3, entrambi saranno spuntati. Lo voglio una volta selezionato un pulsante di opzione all'interno di un determinato gruppo per deselezionare i pulsanti di opzione su tutti gli altri gruppi accanto a quello su cui ho selezionato.

Grazie mille in anticipo.

risposte:

0 per risposta № 1

Attraverso jQuery, quello che stai chiedendo è sicuramente possibile. Ecco la soluzione esatta:

$("#div1 form input:radio").change(function() {
// Grabs all other radio buttons in the form, and
// deselects all but the one which was clicked on.
$("#div1 form input:radio").not(this).prop("checked", false);
});

Inoltre, gli ID devono essere univoci al 100% tra qualsiasi elemento HTML. Sebbene ciò non impedisca il funzionamento del codice sopra riportato, se si dovesse tentare di selezionare un elemento in base al suo ID come $("#r1") verrà restituito solo uno di questi elementi, non tutti.

Per un'implementazione completa:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#div1 form input:radio").change(function() {
// Grabs all other radio buttons in the form, and
// deselects all but the one which was clicked on.
$("#div1 form input:radio").not(this).prop("checked", false);
});
});
</script>

<div id="div1">
<form>
<input type="radio" name="r1" id="r1" value="r1 value 1" />
<input type="radio" name="r1" id="r1" value="r1 value 2" />
<input type="radio" name="r1" id="r1" value="r1 value 3" />

<input type="radio" name="r2" id="r2" value="r2 value 1" />
<input type="radio" name="r2" id="r2" value="r2 value 2" />
<input type="radio" name="r2" id="r2" value="r2 value 3" />

<input type="radio" name="r3" id="r3" value="r3 value 1" />
<input type="radio" name="r3" id="r3" value="r3 value 2" />
<input type="radio" name="r3" id="r3" value="r3 value 3" />
</form>
</div>
</body>
</html>

Per compatibilità con IE 6, 7 e 8:

Replace:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
With:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

1 per risposta № 2

C'è una ragione per cui tutti i pulsanti di opzione non possono esserenello stesso gruppo? Metterli con lo stesso nome di gruppo è una soluzione semplice. In caso contrario, utilizzando un semplice gestore di clic jQuery per deselezionare tutti gli altri pulsanti di opzione funzionerà.

Inoltre, nel tuo esempio hai ID duplicati. Non sono sicuro se questo è intenzionale o un errore, ma dovresti risolvere anche questo.

1 per risposta № 3

In questo modo hai i tuoi gruppi. Ma appena selezioni un'altra radio deseleziona qualsiasi altra radio. id "s, nome" è cambiato.

<div id="div1">
<form>
<div>Group 1
<input type="radio" name="r" id="g1r1" value="r1 value 1" />
<input type="radio" name="r" id="g1r2" value="r1 value 2" />
<input type="radio" name="r" id="g1r3" value="r1 value 3" />
</div>
<div>Group 2
<input type="radio" name="r" id="g2r1" value="r2 value 1" />
<input type="radio" name="r" id="g2r2" value="r2 value 2" />
<input type="radio" name="r" id="g2r3" value="r2 value 3" />
</div>
<div>Group 3
<input type="radio" name="r" id="g3r1" value="r3 value 1" />
<input type="radio" name="r" id="g3r2" value="r3 value 2" />
<input type="radio" name="r" id="g3r3" value="r3 value 3" />
</div>
</form>
</div>

1 per risposta № 4

Modifica il codice in modo che l'attributo name per tutti i pulsanti di opzione sia lo stesso. E non puoi avere lo stesso ID per più di un elemento.