JavaScriptでinputタグのチェックボックスがチェックされているかを確認する方法(checked)

input_checkbox

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、JavaScriptでinputタグのチェックボックスがチェックされているかを確認する方法(checked)について解説していきます。

inputタグのチェックボックスがチェックされているかを確認する方法

JavaScriptでinputタグのチェックボックスがチェックされているかを確認するには、

type="checkbox"のinputタグのchecked プロパティを取得することで、確認することができます。

checked プロパティは真偽値(true/false)で、チェック状態がtrue・未チェックがfalseです。

次のSampleCodeは、確認チェックボックスにチェックを入れると、送信ボタンが表示されるようなコードになります。

<style>
    .form-actions {
        display: none;
        text-align: center;
        margin-top: 20px;
    }
</style>
<div>
    <input type="checkbox" id="confirm">
    上記の内容で、送信してよろしいですか?
</div>
<div id="submit" class="form-actions">
    <button type="submit" name="Submit" >送信ボタン</button>
</div>
<script>

const confrimBtn = document.getElementById('confirm');
const submitBtn = document.getElementById('submit');
console.log({submitBtn});

confrimBtn.onclick = (e) => {
    console.log(e.target);
    console.log(e.target.value);
    console.log(e.target.checked);

    // 1. チェックされたら、送信ボタンを表示する
    if (e.target.checked) submitBtn.style.display = 'block';
    else  submitBtn.style.display = 'none';
}
</script>

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿