【JavaScript】checkedを持っているinput要素の親要素を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでcheckedを持っているinput要素の親要素を取得する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

input要素がcheckedを持っているか判定する

input要素がcheckedを持っているかは、checkedプロパティの値で取得することができます。checkedプロパティは、対象の要素がcheckedを持っている場合はtrueを、持っていない場合はfalseを返します。

HTML

<label><input type="checkbox" name="checkbox[]" value="1" checked>Item1</label>

JavaScript

const input = document.querySelector('input')

if(input.checked === true){
    console.log(input.value)
}

上記を実行すると、コンソールにinput要素のvalueが出力されます。対象の要素のcheckedプロパティを取得することで、input要素がcheckedを持っているか判定することができます。

親要素を取得する

JavaScriptで親要素を取得する方法はいくつかありますが、ここでは私がよく使用する2つの方法をご紹介したいと思います。

parentElement

parentElementは、ノード上の親要素を返すプロパティです。

HTML

<label><input type="checkbox" name="checkbox[]" value="1" checked>Item1</label>

JavaScript

const input = document.querySelector('input')
console.log(input.parentElement)

上記を実行すると、実行結果には下記の内容が出力されます。

実行結果

<label>...</label>

以上がparentElementによる親要素の取得方法です。メソッドチェーンでparentElementをつなげることで親要素より上にある要素を取得することができますが、ソースがゴチャっとしますので、もし親要素より上の要素を取得する必要もしくは将来的に可能性がある場合はclosest()を使用します。

closest()

closest()は、対象の要素からルート要素に向かって、引数に指定された文字列の要素が見つかるまで探索するメソッドです。ポリフィルがあるため、IEでも動作させることができるようです。

HTML

<div id="app">
    <ul>
        <li>
            <label><input type="checkbox" name="checkbox[]" value="1">Item1</label>
        </li>
    </ul>
</div>

JavaScript

const input = document.querySelector('input')
console.log(input.closest('#app'))

上記を実行すると、実行結果には下記の内容が出力されます。

実行結果

<div id="app">...</div>

ポリフィルは下記のページで提供されています。使用される場合は、ポリフィル関連のスクリプトを一つのファイルにまとめておいて読み込むとすっきりするのでおすすめです。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/closest

checkedを持っているinput要素の親要素を取得する

本題のcheckedを持っているinput要素の親要素の取得についてご紹介します。前項までにご紹介した内容ですので、ソースだけご紹介させていただきます。valueに3を持つチェックボックスにcheckedを持たせています。

HTML

<div id="app">
    <ul>
        <li><label><input type="checkbox" name="checkbox[]" value="1">Item1</label></li>
        <li><label><input type="checkbox" name="checkbox[]" value="2">Item2</label></li>
        <li><label><input type="checkbox" name="checkbox[]" value="3" checked>Item3</label></li>
        <li><label><input type="checkbox" name="checkbox[]" value="4">Item4</label></li>
        <li><label><input type="checkbox" name="checkbox[]" value="5">Item5</label></li>
    </ul>
</div>

JavaScript

const inputs = document.querySelectorAll('input')

Array.from(inputs).forEach((input)=>{
    if(input.checked === true){
        console.log(input.parentElement)
    }
})

実行すると、コンソールに下記のログが出力されます。checkedを持っているチェックボックスの親要素を取得することができていますね。

実行結果

<label>
    <input type="checkbox" name="checkbox[]" value="3" checked>
    Item3
</label>

上記はparentElementの例ですので、closest()で要素を取得する場合は、parentElementの部分を置き換えてご使用ください。

最後に

checkedを持っている要素を取得して何らかの処理を実行する例として、開閉するアコーディオンメニューなどがありますね。読み込み時に子要素がcheckedを持っていれば開いた状態にするといったイメージです。その他の部分でも応用できると思いますので、本記事が制作のお役に立てば幸いです。

以上、JavaScriptでcheckedを持っているinputの親要素を取得する方法のご紹介でした！