【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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍