JSでラジオボタンのタグ<radio>を作った

　簡単だった。DOM操作すればいいだけ。

成果物

• DEMO
• github

before

<radio>
    <option value="m">男</option>
    <option value="f">女</option>
</radio>

after

<input type="radio" value="m" name="17736db99f5211" id="17736db99f5211">
<label for="17736db99f5211">男</label>
<input type="radio" value="f" name="17736db99f5211" id="17736db99f5211-f">
<label for="17736db99f5211-f">女</label>

前回

• vue3でラジオボタングループのコンポーネントをつくるときの考察１（HTML,JS）
• vue3でラジオボタングループのコンポーネントをつくるときの考察２（HTML）

　<input type"radio">というタグがクソだとわかった。

<radio>タグを自作する

　HTMLに書かれた<radio>というタグを、JSで<input>タグに書き換える。

before

<radio>
    <option value="m">男</option>
    <option value="f">女</option>
</radio>

after

<input type="radio" value="m" name="17736db99f5211" id="17736db99f5211">
<label for="17736db99f5211">男</label>
<input type="radio" value="f" name="17736db99f5211" id="17736db99f5211-f">
<label for="17736db99f5211-f">女</label>

　変換は以下APIで行う。

Radio.parse();

　これを開始時に呼び出せばいい。以下のように。

window.addEventListener('load', (event) => {
    Radio.parse();
});

　最小限の入力で、必要な項目を埋めてくれる。idはランダム値。

id

　idを指定する。

before

<radio id="sex1">
    <option value="m">男</option>
    <option value="f">女</option>
</radio>

after

<input type="radio" value="m" name="sex1" id="sex1-m">
<label for="sex1-m">男</label>
<input type="radio" value="f" name="sex1" id="sex1-f">
<label for="sex1-f">女</label>

　<input>のidは、<radio>のid+<option>のvalueである。

name

　idの末尾をnameにする。

<radio id="color" label="色">
    <option value="white" selected="false">白</option>
    <option value="black">黒</option>
    <option value="#FA49AB" name="picker"><input type="color" disabled></option>
</radio>

<input type="radio" checked="true" value="white" name="color" id="color-white">
<label for="color-white">白</label>
<input type="radio" value="black" name="color" id="color-black">
<label for="color-black">黒</label>
<input type="radio" value="#FA49AB" name="color" id="color-picker">
<label for="color-picker"><input type="color" disabled=""></label>

<radio>	<option>		<input>
id	value	name	id	name
ない	ある	ない	{random}-{value}	{random}
ない	ある	ある	{random}-{name}	{random}
ある	ある	ない	{id}-{value}	{id}
ある	ある	ある	{id}-{name}	{id}
ある	ない	ない	{id}-{random}	{id}
ない	ない	ない	{random1}-{random2}	{random1}

　<option>はvalueかtextNodeの少なくとも１つが必要。

<option>		<input>
value	textNode	value
ない	ない	Error('<option>にはvalue属性またはtextNodeが必要です。')
ある	ない	<input value="{value}">
ある	ある	<input value="{value}">
ない	ある	<input value="{textNode}">

対象環境

• 2021-01-25
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux