> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/html/element/input/radio-buttons.md).

# type="radio"

\<input> element as "radio buttons"

🔰 [HTML](/web/html.md) ⟩ [Elements](/web/html/element.md) ⟩ [\<input>](/web/html/element/input.md) ⟩

{% 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>](/web/html/element/less-than-form-greater-than.md)
  {% endtab %}

{% tab title="⚡ 事件" %}

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

{% hint style="warning" %}

* 由 [**$all**](/web/browser/dom/querying-elements/dom.md)**('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](/web/appendix/custom/helper-functions.md)
  {% 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](/web/css/layout/system.md)
* [helper functions](/web/appendix/custom/helper-functions.md)
  {% endtab %}
  {% endtabs %}