type="radio"
<input> element as "radio buttons"
Last updated
<input> element as "radio buttons"
Last updated
JS.info ⟩ Form properties and methods ⭐️⭐️
Radio Button 事件切換實作 - jQuery
MDN ⟩
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>
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>