Svelte 中如何使用 Radio 按鈕綁定變量

387字
2分鐘
2024-08-15
- Svelte

在前端開發中，處理表單元素時，radio 按鈕是一個常見的選擇控件。Svelte 框架中，radio 按鈕的綁定十分簡單且直觀，本文將展示如何通過 bind:group 屬性將多個 radio 按鈕綁定到同一個變量，並根據用戶的選擇自動更新該變量。

實現步驟

1. 創建變量

首先，我們需要在 Svelte 組件的 <script> 標籤中定義一個變量，用來存儲用戶選擇的 radio 按鈕的值：

1
<script>
2
    let selectedOption = "option1";
3
</script>

2. 設置 Radio 按鈕

然後，在 HTML 部分使用 input 標籤來創建多個 radio 按鈕，並通過 bind:group={selectedOption} 將它們綁定到同一個變量 selectedOption：

1
<label>
2
    <input type="radio" bind:group={selectedOption} value="option1">
3
    Option 1
4
</label>
5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option2">
7
    Option 2
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option3">
11
    Option 3
12
</label>

3. 顯示選中的值

通過 Svelte 的雙向數據綁定機制，當用戶選擇不同的 radio 按鈕時，selectedOption 會自動更新為選中的 value 值。我們可以將該值顯示出來：

1
<p>Selected option: {selectedOption}</p>

完整示例

1
<script>
2
    let selectedOption = "option1";
3
</script>
4

5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option1">
7
    Option 1
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option2">
11
    Option 2
12
</label>
13
<label>
14
    <input type="radio" bind:group={selectedOption} value="option3">
15
    Option 3
16
</label>
17

18
<p>Selected option: {selectedOption}</p>