绑定 / 输入框组 • Svelte Tutorial

Svelte基础绑定输入框组

小主，又一个新的指令bind:group。当需要把多个单选框或复选框组合起来使用时可以用这个指令。绑定到相同组的单选框互相排它也就是同时只会有个单选框被选中, 如果是复选框绑定的值就是包含所有选中的复选框值的数组。快动手试下吧，给单选框添加上bind:group={scoops}：

If you have multiple type="radio" or type="checkbox" inputs relating to the same value, you can use bind:group along with the value attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values. Add bind:group={scoops} to the radio inputs...

App

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

再给复选框添加上bind:group={flavours}

...and bind:group={flavours} to the checkbox inputs:

App

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

Edit this page on GitHub

previous next

列表选择框多选列表框

<script>

	let scoops = $state(1);

	let flavours = $state([]);

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

</script>

<h2>Size</h2>

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

	<label>

		<input

			type="radio"

			name="scoops"

			value={number}

/>

		{number} {number === 1 ? 'scoop' : 'scoops'}

	</label>

{/each}

<h2>Flavours</h2>

{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}

	<label>

		<input

			type="checkbox"

			name="flavours"

			value={flavour}

/>

		{flavour}

	</label>

{/each}

{#if flavours.length === 0}

	<p>Please select at least one flavour</p>

{:else if flavours.length > scoops}

	<p>Can't order more flavours than scoops!</p>

{:else}

<p>

		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}

		of {formatter.format(flavours)}

	</p>

{/if}

show text show editor