こんにちは、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の状態を変更する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

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

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