JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.target

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

JavaScriptの.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;
}

さいごに

フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めることができるので、参考にしてみてください。