こんにちはフロントエンドエンジニアのまさにょんです!
今回は、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!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!