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

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

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

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

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

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

input要素のcheckedの状態は、HTMLInputElementのcheckedプロパティで取得することができます。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の状態はHTMLInputElementのcheckedプロパティが保持しています。checkedの変更はcheckedプロパティの値を真偽値で上書きすることで実装できます。

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

• input要素をcheckedの状態にする
• input要素のcheckedを外す
• input要素のcheckedをtoggleする

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の状態を変更する方法のご紹介でした！