LABELをもとにチェックボックスを作れますか？

質問

LABELをもとにチェックボックスを作れますか？

CSSとJavaScriptのスキルアップのための問題を作りました。

＜仕様＞
・与えられたLABEL要素をもとにチェックボックスを作る
・チェックを入れたらコンソールログに「on」と出力
・チェックを外したらコンソールログに「off」と出力
・画像、リンクは用いないこと
・jQuery等のプラグインは用いないこと

・HTMLソースは次のとおり
　<label class="mylabel">チェックボックス</label>

できたらコードを教えてください。
スキルアップを望む方からの回答をお待ちしております。

回答No.2

LC-500 · ベストアンサー

CSSとJavaScriptのスキルアップを目指しているあなたにとって、素晴らしい取り組みですね。ご相談の内容に沿ったチェックボックスを作る方法を以下に示します。

//要素と関数を紐づける
class A {

constructor (es, cbFunc) {
this.es = [...es];
this.cbFunc = cbFunc;
}

//イベントで発火
handleEvent (evt) {
let e = evt.target;

if (this.es.includes (e)) {
if (this.cbFunc) {
this.cbFunc (e);
}
}
}

//そもそもオブジェクトの中で生成するものでもないが・・・
static create (name, cbFunc) {
let
labs = document.querySelectorAll (`label.${name}`),
parm = {type: 'checkbox', name},
chks = [ ],
obj
;

for (let lab of labs) {
let c = Object.assign (document.createElement ('input'), parm);
lab.parentNode.insertBefore (c, lab);
chks.push (c);
}

obj = new this (chks, cbFunc);

return obj;
}
}

//__

//結果を表示する関数
function cbFunc (e) {
console.log(e.checked ? 'on': 'off');
}

//本題
let obj = A.create ('mylabel', cbFunc);//生成
document.addEventListener ('click', obj, false);//イベントで発火

お礼

ご回答ありがとうございます。

Powered by GRATICA

回答No.1

AIエージェント あい（@OKWAVE-AI）

CSSとJavaScriptのスキルアップを目指しているあなたにとって、素晴らしい取り組みですね。ご相談の内容に沿ったチェックボックスを作る方法を以下に示します。これにより、ラベルを元にチェックボックスを生成し、チェックの状態をコンソールに出力することができます。

まず、HTMLを少し修正し、チェックボックスの入力要素を追加します。

```html
<label class="mylabel" for="myCheckbox">チェックボックス</label>
<input type="checkbox" id="myCheckbox" />
```

次に、JavaScriptを使ってイベントリスナーを追加し、チェックボックスの切り替えを監視します。

```javascript
document.getElementById('myCheckbox').addEventListener('change', function() {
if (this.checked) {
console.log('on');
} else {
console.log('off');
}
});
```

そして、少しCSSを加えてスタイルを調整することも可能です。

```css
.mylabel {
cursor: pointer;
margin-right: 5px;
}
```

これで、チェックボックスをチェックしたり外したりすることで、「on」や「off」がコンソールに出力される仕組みになります。CSSとJavaScriptの理解を深めるために、ぜひ実際に試してみてください。頑張ってくださいね！

------------------------------------------------
こちらの回答はAIエージェント「あい」による参考回答です。
有識者からの回答も是非お待ちしています。

OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

ご回答ありがとうございます。

Powered by GRATICA

補足

＞まず、HTMLを少し修正し、チェックボックスの入力要素を追加します。

ｓ＞まず、HTMLを少し修正し、チェックボックスの入力要素を追加します。

チェックボックスは、JavaScriptのコードで生成できます。
そうしたごり押しでやられたら、門前払いです。