---
description: <input> element as "radio buttons"
---

# type="radio"

🔰 [HTML](../..) ⟩ [Elements](..) ⟩ [\<input>]() ⟩

{% tabs %}
{% tab title="📗 參考" %}
* JS.info ⟩ [Form properties and methods](https://javascript.info/form-elements) ⭐️⭐️
* [Radio Button 事件切換實作](https://nacho.coderbridge.io/2020/11/14/radio-button-change-event/) - jQuery
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩&#x20;
  * [<**input** type="**radio**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
  * [**HTMLFormElement**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)
  * **HTMLElement** ⟩&#x20;
    * [**change**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) event
    * [**input**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event
{% endtab %}

{% tab title="👥 相關" %}
* [\<form>](../less-than-form-greater-than)
{% endtab %}

{% tab title="⚡ 事件" %}
* "[**change**](../../../browser/event/change-event)" - value commit 才會觸發的事件
* "[**input**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)" - 只要 value 改變就會觸發。
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
* 由 [**$all**](../../../browser/dom/querying-elements/dom)**('input\[type="radio"]')** 找來的 radio buttons 是一個 [**NodeList**](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)，沒有 [**value**](https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value) 屬性❗️
* 由 "**name**" 屬性(透過 [**form**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)，如：form.radioName)找來的 radio buttons 才是 [**RadioNodeList**](https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList), 才會有 [**value**](https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value) (form.radioName.value) 屬性，也才可以查詢**目前選擇的** radio button 的 value。
{% endhint %}

## "change" event

{% tabs %}
{% tab title="change" %}
```javascript
const list = $('.ice-cream');

list.onchange = (e) => {
  const result = $('.result');
  result.textContent = `You like ${e.target.value}`;
};
```
{% endtab %}

{% tab title="html" %}
```html
<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

<div class="result"></div>
```
{% endtab %}

{% tab title="⬆️ 需要" %}
* [helper functions](../../../appendix/custom/helper-functions)
{% endtab %}
{% endtabs %}

## code example

{% tabs %}
{% tab title="csb" %}
{% embed url="https://codesandbox.io/embed/flexbox-f9jgx?fontsize=14&hidenavigation=1&theme=dark" %}
radio buttons in an app
{% endembed %}
{% endtab %}

{% tab title="js" %}
```javascript
import { $, /* $all, */ log } from './layout/helpers.mjs';

const flexbox = $('.flex');

// append more flex items
const n = 7;

for (let i = 0; i < n; i++) {
    let div = document.createElement('div');
    flexbox.appendChild(div);
}

//
const flex = $('.flex');

// controls
const form = $('form');

// flex-direction
// --------------
// $('#reverse'): HTMLInputElement
// ⭐️ form.dir: RadioNodeList
// ⭐️ $all('.dir > input[type="radio"]'): NodeList

// dirction on change
$('.dir').onchange = (e) => {
    // ⭐️ 注意：e.target 可能是 checkbox❗️
    let dir = form.dir.value;
    let postfix = form.reverse.checked ? '-reverse' : '';
    flex.style.flexDirection = `${dir}${postfix}`;
};

// flex-wrap
// ----------
// ⭐️ form.wrap: RadioNodeList

// wrap on change
$('.wrap').onchange = (e) => {
    flex.style.flexWrap = e.target.value;
};

```
{% endtab %}

{% tab title="html" %}
```html
<form id="form1" class="c1">
      <vstack- spacing="0" class="b">
        <!-- flex box -->
        <div class="flex">
          <vcenter->1</vcenter->
          <vcenter->2</vcenter->
          <vcenter->3</vcenter->
        </div>

        <!-- controls -->
        <hstack- class="b ctrls" spacing="0">
          <!-- flex-direction -->
          <vstack- class="ctrl dir">
            <!-- title -->
            <vcenter- class="title"><span>direction</span></vcenter->
            <hstack- alignment="center">
              <input type="radio" id="row" name="dir" value="row" checked />
              <label for="row">row</label>
            </hstack->
            <hstack- alignment="center">
              <input type="radio" id="col" name="dir" value="column" />
              <label for="col">column</label>
            </hstack->
            <hstack- alignment="center">
              <input
                type="checkbox"
                id="reverse"
                name="reverse"
                value="reverse"
              />
              <label for="reverse">reverse</label>
            </hstack->
          </vstack->

          <!-- flex-wrap -->
          <vstack- class="ctrl wrap">
            <!-- title -->
            <vcenter- class="title">
              <span>wrap</span>
            </vcenter->

            <!-- nowrap -->
            <hstack- alignment="center">
              <input
                type="radio"
                id="wrap-nowrap"
                name="wrap"
                value="nowrap"
                checked
              />
              <label for="wrap-none">nowrap</label>
            </hstack->

            <!-- wrap -->
            <hstack- alignment="center">
              <input type="radio" id="wrap-wrap" name="wrap" value="wrap" />
              <label for="wrap-wrap">wrap</label>
            </hstack->

            <!-- wrap-reverse -->
            <hstack- alignment="center">
              <input
                type="radio"
                id="wrap-wrap-reverse"
                name="wrap"
                value="wrap-reverse"
              />
              <label for="wrap-wrap-reverse">wrap-reverse</label>
            </hstack->
          </vstack->
        </hstack->
      </vstack->
    </form>
```
{% endtab %}

{% tab title="⬆️ 需要" %}
* [Layout System](../../../css/layout/system)
* [helper functions](../../../appendix/custom/helper-functions)
{% endtab %}
{% endtabs %}
