JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

JavaScriptでは、配列のデータをもとにラジオボタンを動的に生成することができます。その際に活用するのが、要素を作成する createElement() メソッドと、作成した要素を画面に追加する appendChild() メソッドです。

サンプルコード

以下は、性別の選択肢を配列で管理し、それを元にラジオボタンを自動生成するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
</body>
<script>
   var gender = ['Male', 'Female'];
   gender.forEach((genderValue, i) => {
      var labelValue = document.createElement('label');
      labelValue.innerHTML = genderValue;
      var inputValue = document.createElement('input');
      inputValue.type = "radio";
      inputValue.name = genderValue;
      inputValue.genederValue = i;
      document.body.appendChild(labelValue);
      document.body.appendChild(inputValue);
   });
</script>
</html>

コードの解説

  • gender配列：「Male」「Female」という選択肢のデータを格納しています。
  • forEach()メソッド：配列の各要素に対して、順番に処理を実行します。第2引数の i にはインデックス番号が渡されます。
  • createElement('label')：ラベル要素を新規に作成し、innerHTML で表示するテキストを設定しています。
  • createElement('input')：input要素を作成し、type 属性に「radio」を指定することでラジオボタンとして機能させます。さらに name 属性に配列の値を設定しています。
  • appendChild()メソッド：生成したlabel要素とinput要素を document.body に追加することで、実際にページへ表示しています。

このように配列とループ処理を組み合わせれば、選択肢が増えた場合でも配列に値を追加するだけで済むため、保守性の高いコードになります。

実行方法

上記のプログラムを実行するには、コードを「index.html」などの名前で保存します。VS Codeを使用している場合は、保存したファイルを右クリックし、「Open with Live Server」を選択するとブラウザ上で簡単に確認できます。

実行結果

プログラムを実行すると、配列の内容に基づいたラジオボタン（Male / Female）がページ上に動的に表示されます。

【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. 【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

    JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit