【JavaScript】input要素のcheckedの状態を変更する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでinput要素のcheckedの状態を変更する方法をご紹介しています。

JavaScriptでcheckedの状態を変更するにはどうすればいいんだろう?

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

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

input要素のcheckedの状態を取得する

input要素のcheckedの状態は、HTMLInputElementcheckedプロパティで取得することができます。checkedプロパティは、対象の要素がcheckedを持っていればtrueを、持っていなければfalseを返します。

inputElement.checked

検証用のサンプルを作成します。input要素を2つ用意し、checkedの有無によるcheckedプロパティの戻り値を確認します。

HTML

<label><input type="checkbox" name="item[]" value="1">Item 1</label>
<label><input type="checkbox" name="item[]" value="2" checked>Item 2</label>

JavaScript

const input1 = document.querySelectorAll('input')[0]
const input2 = document.querySelectorAll('input')[1]

console.log('input1:' + input1.checked)
console.log('input2:' + input2.checked)

実行結果は下記の通りです。

実行結果

input1:false
input2:true

input要素のcheckedの状態に合わせて真偽値を取得することができています。もしinput要素の数が多かったり、ループで処理したい場合は下記のように変更してご利用ください。

const inputs = document.querySelectorAll('input')

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

input要素のcheckedの状態を変更する

input要素のcheckedの状態を取得する方法がわかりましたので、次はinput要素のcheckedの状態を変更する方法をご紹介します。

前項で解説したようにinput要素のcheckedの状態はHTMLInputElementcheckedプロパティが保持しています。checkedの変更はcheckedプロパティの値を真偽値で上書きすることで実装できます。

下記によく使用する3パターンのサンプルを掲載しています。実装の際に参考にしていただければ幸いです。

input要素をcheckedの状態にする

HTML

<label><input type="checkbox" name="item[]" value="1">Item 1</label>

JavaScript

const input = document.querySelector('input')

input.checked = true

input要素のcheckedを外す

HTML

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

JavaScript

const input = document.querySelector('input')

input.checked = false

input要素のcheckedをtoggleする

HTML

<label><input type="checkbox" name="item[]" value="1">Item 1</label>
<button>Checked Toggle</button>

JavaScript

const input = document.querySelector('input')
const btn = document.querySelector('button')

btn.addEventListener('click', ()=>{
    input.checked = !input.checked
})

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

最後に

checkedの状態をスクリプト側で変更する場合、checkedプロパティの値を判定して上書きする一連の流れを頻繁に使用します。input要素のchekcedの状態はcheckedプロパティ取得できるということだけ覚えておけば以降の処理はスムーズに実装することができますので、覚えておいて損はないかなと思います。

以上、JavaScriptでinput要素のcheckedの状態を変更する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍