type="radio"

<input> element as "radio buttons"

JS.info ⟩ Form properties and methods ⭐️⭐️
Radio Button 事件切換實作 - jQuery

由 $all('input[type="radio"]') 找來的 radio buttons 是一個 NodeList，沒有 value 屬性❗️
由 "name" 屬性(透過 form，如：form.radioName)找來的 radio buttons 才是 RadioNodeList, 才會有 value (form.radioName.value) 屬性，也才可以查詢目前選擇的 radio button 的 value。

"change" event

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

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

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

code example

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

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

Previoustype="range"Nextblock vs. inline

Last updated 3 years ago

Was this helpful?

<form id="form1" class="c1"> <vstack- spacing="0" class="b">  <div class="flex"> <vcenter->1</vcenter-> <vcenter->2</vcenter-> <vcenter->3</vcenter-> </div>  <hstack- class="b ctrls" spacing="0">  <vstack- class="ctrl dir">  <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->  <vstack- class="ctrl wrap">  <vcenter- class="title"> <span>wrap</span> </vcenter->  <hstack- alignment="center"> <input type="radio" id="wrap-nowrap" name="wrap" value="nowrap" checked /> <label for="wrap-none">nowrap</label> </hstack->  <hstack- alignment="center"> <input type="radio" id="wrap-wrap" name="wrap" value="wrap" /> <label for="wrap-wrap">wrap</label> </hstack->  <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>