javascript / intermediate
Snippet
Synchronisierung von Radio-Inputs mit Group-Bindings
Die Direktive 'bind:group' ermöglicht es mehreren Radio- oder Checkbox-Inputs, eine einzige Statusvariable zu teilen. Dies stellt sicher, dass jeweils nur ein Radio-Button in einer Gruppe ausgewählt ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>let selectedFlavor = 'Vanilla';</script><label><input type="radio" bind:group={selectedFlavor} value="Vanilla">Vanilla</label><label><input type="radio" bind:group={selectedFlavor} value="Chocolate">Chocolate</label>
svelte
Erklärung
1
let selectedFlavor = 'Vanilla'
Die reaktive Variable, die den 'value' des aktuell ausgewählten Inputs enthält.
2
bind:group={selectedFlavor}
Verbindet diesen spezifischen Input mit der gemeinsamen Gruppenvariable.
3
value="Vanilla"
Die Daten, die 'selectedFlavor' zugewiesen werden, wenn dieser Radio-Button ausgewählt wird.