上記リンク先の前回の記事では、シンプルに
dialogタグを使ってダイアログ（モーダルウインドウ）を開閉することについて書きましたが、
今回は、そのdialogタグを使ったダイアログ（モーダルウインドウ）内にあるチェックボックスから、ユーザーが選択した値を受け取る方法について書いていきたいと思います。

それでは早速次のセクションから、コード付きでその方法について触れていきたいと思います。

基本のコード：dialog要素を使ったモーダルウインドウ（チェックボックスを内包）

まず、チェックボックスを内包したモーダルウインドウの基本形について書いていきます。
2行目、37行目のように、dialog要素の中にform要素を内包しておきます。
その中に、
14行目〜33行目のように、2個のチェックボックスを置いておきます。
こうすることで、モーダル内の選択を受け取るためのhtml構造ができます。

<div>
  <button id="buttonOpen">モーダルを開く</button>
</div>

<dialog class="container-modal" id="modalDialog">
  <form method="dialog" id="formInDialog">
    <div class="wrapper-modal">
      <h2>シンプルなモーダル</h2>
      <p>
        サンプルテキスト。
        今回は、このモーダル内にあるチェックボックスの選択を
        受け取ってみるサンプルです。
      </p>
      <div>
        <p>あなたが好きなWeb技術カテゴリ：</p>
        <label>
          <input 
            type="checkbox"
            id="checkBoxVue"
            name="checkBoxCategory"
            value="Vue.js"
          >
          Vue.js
        </label>
        <label>
          <input 
            type="checkbox"
            id="checkBoxWordPress"
            name="checkBoxCategory"
            value="WordPress"
          >
          WordPress
        </label>
      </div>
      <button id="buttonConfirm" type="submit">選択を確認する</v-btn>
      <button id="buttonClose" type="reset">モーダルを閉じる</v-btn>
    </div>
  </form>
</dialog>

続いて、JavaScriptは以下のような感じになります。

<script>
  const myDialog = document.getElementById('modalDialog');
  const myButtonOpen = document.getElementById('buttonOpen');
  const myButtonClose = document.getElementById('buttonClose');
  const myButtonConfirm = document.getElementById('buttonConfirm');
  const thisFormInDialog = document.getElementById('formInDialog');
  let myArray = [];
  myButtonOpen.addEventListener('click', () => {
    myDialog.showModal();
  });
  myButtonClose.addEventListener('click', () => {
    myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
  });
  thisFormInDialog.addEventListener('submit', () => {
    myArray = [];
    for (let i = 0; i < thisFormInDialog.checkBoxCategory.length; i++) {
      if (thisFormInDialog.checkBoxCategory[i].checked) {
        console.log('選択されている技術カテゴリ'+thisFormInDialog.checkBoxCategory[i].value);
        myArray.push(thisFormInDialog.checkBoxCategory[i].value);  
      }
    }
  });
</script>

↑2〜6行目は、JavaScriptで操作したい各html要素を、 getElementById で取得しています。
7行目では、選択されたチェックボックスの値に後々アクセスできるよう、格納用の配列を作成しています。
8〜13行目は、前回の記事と同じです。8〜10行目がモーダルを開く部分。11〜13行目がモーダルを閉じる部分です。
14〜22行目が、モーダル内で選択されたチェックボックスの値を受け取っている部分です。
この部分は、上で書いたhtml構造とも関係していますので、次のセクションで詳しく見ていきたいと思います。

method="dialog"を指定したform要素

2つ上のセクションでご紹介したhtmlの、次の部分。form要素に注目してみてください。

<div>
  <button id="buttonOpen">モーダルを開く</button>
</div>

<dialog class="container-modal" id="modalDialog">
  <form method="dialog" id="formInDialog">
    ...（省略）...

method="dialog" という、見慣れない値が指定されていると思います。
これは、dialogに内包されたformタグのみで動作するmethodで、
「その form 内にある button type="submit" のボタンが押された時、
submitイベントを発行する」
という特性を持っています。

1つ上のセクションでご紹介したJavaScriptコードの次の部分は、
その form method="dialog" の特性を活かして、

thisFormInDialog.addEventListener('submit', () => {

と記述されている部分で submit イベントが発生したことを監視しています。

続いて、

...（省略）...
thisFormInDialog.addEventListener('submit', () => {
    myArray = [];
    for (let i = 0; i < thisFormInDialog.checkBoxCategory.length; i++) {
      if (thisFormInDialog.checkBoxCategory[i].checked) {
        console.log('選択されている技術カテゴリ'+thisFormInDialog.checkBoxCategory[i].value);
        myArray.push(thisFormInDialog.checkBoxCategory[i].value);  
      }
    }
  });
</script>

↑以降のこのコードがどういう意味かについて書いていきます。
先ほども書いた通り、

thisFormInDialog.addEventListener('submit', () => {

で submit イベントが発生したことを監視。（つまり、モーダル内の type="submit" を持つ button が押された時を監視）
その時点で、form要素（id="thisFormInDialog"）は
チェックボックスの値を受け取っています。

そして、

for (let i = 0; i < thisFormInDialog.checkBoxCategory.length; i++) {

の部分で、form要素（id="thisFormInDialog"）が受け取った
チェックボックスの値（ thisFormInDialog.checkBoxCategory.length ）が
「存在する分だけ繰り返しの処理を行う」と定義しています（よくあるfor文の事です）。

そのfor文の中に書いてある

if (thisFormInDialog.checkBoxCategory[i].checked) {}

↑こちらは、
form要素（id="thisFormInDialog"）が受け取った
チェックボックスの値（ thisFormInDialog.checkBoxCategory )の中に、
チェックされたものがあった場合 ( thisFormInDialog.checkBoxCategory[i].checked ) に
実行される処理が書かれています。

このif文の中で、

console.log('選択されている技術カテゴリ'+thisFormInDialog.checkBoxCategory[i].value);

↑この様に書いてあげれば
「ユーザーによって選択された、モーダルの中のチェックボックスの値」に
アクセスする事ができる、というわけです。

この例では、console.log で単純にコンソールに出力しているだけですが、
アクセスできているということは、取り出して次のページに渡したり、
他のUIパーツに渡して、画面に表示したりする事が可能、というわけです。

ちなみにその次の行にある

myArray.push(thisFormInDialog.checkBoxCategory[i].value); 

↑これは、配列 myArray に、チェックされた値を格納している記述になります。

配列化しておけば、取得した値を
他のUIパーツや次のページに渡すにせよ何にせよ、
なにかと扱いがしやすいため、この様に記述しています。

実際に動くサンプル

今回のサンプルと似たコードで、実際に動くサンプルを作成してあります。
次のリンク先のページにて、ボタンを押して、実際にモーダルが開く様子を確認する事が可能です。
dialogタグを使ったダイアログ（モーダルウインドウ）のサンプル

この記事のまとめ

今回は、「dialog要素」の基本的な使い方について書いた記事：
dialog要素を使ってモーダルウインドウを作成する方法
の続編として、
「dialogタグを使ったダイアログ（モーダルウインドウ）内にあるチェックボックスから、
ユーザーが選択した値を受け取る方法」について書いてみました。

今回の例ではチェックボックスのサンプルをご紹介しましたが、
同様の方法で、ユーザーが入力したテキストフィールドの値を受け取ったり、
ラジオボタンの選択値などの取得も、もちろん可能です。

dialogタグを使う事で、これまでモーダルを自作する際に
div等を組み合わせて作成していた場合に比べ、
シンプルに書ける上、さらにタグの意味としても
明示的に「これがダイアログ（モーダルウインドウ）ですよ」と書けるため
html構造の意味合い的にも
より良いものになります。

ダイアログ（モーダルウインドウ）の自作をする際は、
このdialogタグを活用していくことで、
より良いユーザー体験を提供できる一助になることと思います。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

当サイトでは、今後もWebデザイン・Web制作に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。