【Javascript】チェックボックスが選択されたら、文字列を取得して表示したい

バートリーのさいとうです。

今回は

【Javascript】チェックボックスが選択されたら、文字列を取得して表示したい

というテーマで、普段の業務から得られた学びを共有したいと思います。

この記事は、

Javascript（JS）で文字列を取得・置き換えしたい、あと、チェックボックスとかで選択された値を表示したい、が出来ない。

そんな方に向けての記事です。

JSで表示されている文字列を取得して、それを置き換える際の方法…
意外とまとまってなかったりします。

今回は特にユースケースの一つとして想定される、チェックボックスなどで選択された要素を取得し、文字列として表示するというところまで解説します。

「基本的な文字列の置き換えの方法から、チェックボックス等で選択した値を選択済みの要素として表示できるところまで全部知りたい！」

という方は、この記事を読めば大体全部わかりますので、是非最後までお付き合いください。

この記事を読むメリット

JSで文字列を取得して、置き換えるまでのフローがわかる
その際の注意点もわかる
選択された要素のデータを表示することができるようになる

JSでテキストを取得する

JSには、テキスト置き換えのためのメソッドが2つ用意されています。

textContent
innerHTML

です。

違いとしては

textContent：テキストのみを取得する
innerHTML：HTMLタグ含めて取得する

ということです。例を見てみましょう。

<div>Favorites</div>

上の要素のテキスト（Favorites）だけを取得しようとしたら、textContentを使います。

対して、<div>まで含めて取得するならinnerHTML、という感じです。

今回は、textContentを利用して処理をしていきます。

取得した要素のテキストを任意の文字列に置き換える

先ほど説明したtextContentを利用して文字列を取得し、その文字列を表示する例を見てみます。

Add to Favoritesを押すと、りんごが表示されます。

See the Pen Untitled by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.

シンプルな例ではありますが、これで文字列の取得から表示までが可能になります。

JSのコードとしては以下の通りとなります。

function extractListStr(){
  //果物リスト取得
  let content_list_items = document.getElementsByClassName("content_list_item")
  //表示箇所取得
  let extracted_words = document.getElementById("extracted_words")
  //リストの0番目のテキストを取得し表示する
  extracted_words.textContent = content_list_items[0].textContent
}

では次に、選択した要素を表示する例を見てみましょう。

選択した要素にする場合は？

では、チェックボックスで選択された値を表示することを考えてみたいと思います。

方針としては

チェックボックスが選択されるごとに、関数を呼び出す
関数内では、チェックボックスを全取得し、それぞれのcheckedのbooleanを判定する
条件分岐して、trueのものを表示する

です。

簡単な例を以下で作成しましたので、まずはご覧ください。

用意されているチェックボックスを選択すると”好きなくだもの”に追加され、選択を外すと削除されます。

See the Pen Untitled by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.

jsはこのようになっています。
ざっくりと説明すると、一つ一つのチェックボックスを、選択されたかどうかで、表示用の配列に出し入れすることで実現しています。

//各チェックボックスをHTMLCollectionで取得
let fruits_check_boxes = document.getElementsByClassName("content_list")

//各チェックボックスが選択されたら呼び出される関数
function displaySelectedFruit(){
  //選択された果物の文字列を入れるための配列
  let displayed_fruits = []
  //表示箇所を取得
  let favorites_fruits = document.getElementById("extracted_words")
  //チェックボックスごとに、選択されているかどうかで文字列用の配列に出し入れを行う
  for(let i = 0; i < fruits_check_boxes.length; i++){
    if(fruits_check_boxes[i].checked){
      displayed_fruits.push(fruits_check_boxes[i].nextElementSibling.textContent) 
    } else {
      let removing_fruit = fruits_check_boxes[i].nextElementSibling.textContent
      displayed_fruits = displayed_fruits.filter(item => (item.match(/${removing_fruit}/)) == null);
    }
  } 
  //表示箇所に選択されている果物を表示
  favorites_fruits.textContent = displayed_fruits
}

注意点としては、チェックされていない場合は、displayed_fruitsから取り除く処理をしないといけないことです。その判定をするために、チェックボックスがチェックされるごとに全てのチェックボックスに対して選択されているかの判定を行なっています。

また、配列から要素を取り除く際はfilterで処理していますが、これもケースによって適切なものが変わる場合がある気がします。うまくいかないときは色々探してみてください。