.target

JavaScriptの.targetでその他の入力欄がチェックされたらテキストフィールドを表示

2022年7月16日 5分

チェックボックスを利用したフォームの選択肢で「その他」が選択された場合、フリーの入力欄が表示される。そんな感じのサンプルも作っているので、参考にしてみてください。

.target
チェックされたらテキストフィールドを表示するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.target

JavaScriptの.target は、イベントが配信されたオブジェクトへの参照をする読み取り専用プロパティです。

other.addEventListener('click', (e)=>{
  e.target.classList.add('check');
 });

この記事では、イベントが発生した要素の指定で e.target の条件分岐でclass名の追加・削除を実行させています。

チェックされたらテキストフィールドを表示するサンプル

早速サンプルです。「check1」〜「check4」と「other」の5つチェックボックスが並んでいます。

その中で、左から5つ目の「other」を選択するとテキストフィールドが左からにゅいっと表示され、チェックを外すとテキストフィールドが非表示になります。

かかかず

はじめはテキストフィールドを表示させないので、ごちゃつかないです。

実装の手順と方法

コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

まずは、HTMLを設置したい場所に記述します。

コードを表示

<div class="formBox">
<form>
    <label>
        <input type="checkbox" name="check5box[]" value="check1">check1
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check2">check2
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check3">check3
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check4">check4
    </label>
    <label>
        <input id="other" type="checkbox" name="check5box[]" value="other">other
    </label>
    <input id="text" type="text" name="other" value="" placeholder="その他の入力欄">
</form>
</div>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const text = document.querySelector('#text'); // テキストフィールドを取得
    const other = document.querySelector('#other'); // その他のチェックボックスの取得
    other.addEventListener('click', (e)=>{ 
        if(e.target.checked){ // その他にチェックが入った場合の条件分岐
            text.classList.add('check'); // checkのclassを付与
        } else {
            text.classList.remove('check'); // checkのclassを削除
        }
    });

CSSを記述

最後にCSSの記述です。

コードを表示

.formBox form {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.formBox form label {
    display: inline-block;
    width: calc(100% / 5 - 15px);
}
.formBox form input {
    display: inline-block;
    margin-right: 4px;
}
#text {
    display: block;
    margin: 0;
    transition: 0.4s ease-in-out;
    height: 50px;
    padding: 0;
    width: 0;
}
input#text.check {
    width: 100%;
    padding: 0 15px;
}

ざっくりとしたコードの解説

コードについてざっくりですが解説します。コードはHTML・JavaScript・CSSの3種類です。

HTML

HTMLは、よく見かける form タグの親要素に label input タグが並ぶシンプルな配列です。

<div class="formBox">
<form>
    <label>
        <input type="checkbox" name="check5box[]" value="check1">check1
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check2">check2
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check3">check3
    </label>
    <label>
        <input type="checkbox" name="check5box[]" value="check4">check4
    </label>
    <label>
        <input id="other" type="checkbox" name="check5box[]" value="other">other
    </label>
    <input id="text" type="text" name="other" value="" placeholder="その他の入力欄">
</form>
</div>

サンプルでは、送信にあたるのタグがないので、実際にフォームで設置して利用する場合は <input type="submit"> のタグを一緒に記載するようにしましょう。

JavaScript

JavaScriptはざっくり言うと「フィールドとその他のチェックボックスを取得」して、「その他にチェック有無の条件分岐」の2つで、条件分岐でclass名の追加・削除でテキストフィールドを表示させます。

const text = document.querySelector('#text'); // テキストフィールドを取得
    const other = document.querySelector('#other'); // その他のチェックボックスの取得
    other.addEventListener('click', (e)=>{ 
        if(e.target.checked){ // その他にチェックが入った場合の条件分岐
            text.classList.add('check'); // checkのclassを付与
        } else {
            text.classList.remove('check'); // checkのclassを削除
        }
    });

かかかず

classの付け替えで表示・非表示の切り替えを行うコードです。

CSS

CSSはflexboxの横並びレイアウトに関するものがほとんどで、チェックボックスや文字のラベル部分はそのままです。

ので、チェックボックス部分はいじれる余地があるので、色々カスタマイズしてみてください。

.formBox form {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.formBox form label {
    display: inline-block;
    width: calc(100% / 5 - 15px);
}
.formBox form input {
    display: inline-block;
    margin-right: 4px;
}
#text {
    display: block;
    margin: 0;
    transition: 0.4s ease-in-out;
    height: 50px;
    padding: 0;
    width: 0;
}
input#text.check {
    width: 100%;
    padding: 0 15px;
}