type="radio"

<input> element as "radio buttons"

🔰 HTML ⟩ Elements ⟩ <input> ⟩

📗 參考

• JS.info ⟩ Form properties and methods ⭐️⭐️

• Radio Button 事件切換實作 - jQuery

📘 手冊

• MDN ⟩

  • <input type="radio">

  • HTMLFormElement

  • HTMLElement ⟩

    • change event

    • input event

👥 相關

• <form>

⚡ 事件

• "change" - value commit 才會觸發的事件

• "input" - 只要 value 改變就會觸發。

• 由 $all('input[type="radio"]') 找來的 radio buttons 是一個 NodeList，沒有 value 屬性❗️

• 由 "name" 屬性(透過 form，如：form.radioName)找來的 radio buttons 才是 RadioNodeList, 才會有 value (form.radioName.value) 屬性，也才可以查詢目前選擇的 radio button 的 value。

"change" event

change

const list = $('.ice-cream');

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

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>

⬆️ 需要

• helper functions

code example

csb

radio buttons in an app

js

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;
};

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>

⬆️ 需要

• Layout System
• helper functions