Liaisons / Inputs de groupe • Svelte Tutorial

Bases de Svelte Liaisons Inputs de groupe

Si vous avez plusieurs inputs type="radio" ou type="checkbox" faisant référence à la même valeur, vous pouvez utiliser bind:group avec l’attribut value. Les inputs radio appartenant au même groupe sont mutuellement exclusifs ; les inputs checkbox appartenant au même groupe constituent un tableau des valeurs sélectionnées.

Ajoutez bind:group={scoops} aux inputs radio...

App

<input
	type="radio"
	name="scoops"
	value={number}
	bind:group={scoops}
/>

...et bind:group={flavours} aux inputs checkbox :

App

<input
	type="checkbox"
	name="flavours"
	value={flavour}
	bind:group={flavours}
/>

Modifier cette page sur Github

précédent suivant

Liaisons de select Selects multiples

<script>

	let scoops = $state(1);

	let flavours = $state([]);

	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

</script>

<h2>Taille</h2>

{#each [1, 2, 3] as number}

	<label>

		<input

			type="radio"

			name="scoops"

			value={number}

/>

		{number} {number === 1 ? 'boule' : 'boules'}

	</label>

{/each}

<h2>Parfums</h2>

{#each ['cookies', 'menthe-chocolat', 'fraise'] as flavour}

	<label>

		<input

			type="checkbox"

			name="flavours"

			value={flavour}

/>

		{flavour}

	</label>

{/each}

{#if flavours.length === 0}

	<p>Merci de sélectionner au moins un parfum.</p>

{:else if flavours.length > scoops}

	<p>Vous ne pouvez pas demander plus de parfums que de boules !</p>

{:else}

<p>

		Vous avez commandé {scoops} {scoops === 1 ? 'boule' : 'boules'}

		de parfum : {formatter.format(flavours)}

	</p>

{/if}

show text show editor