今回の記事は、
- Javascriptでラジオボタンを扱う方法を知りたい
- ラジオボタンで選択されている値を取得したい
- ラジオボタンがチェックされているかどうか確認したい
というお悩みをお持ちの方に向けた記事になっています。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Javascriptでラジオボタンを扱う方法
それではまずはJavascriptでラジオボタンを扱う方法を確認していきましょう。
Javascriptでラジオボタンを扱うには、checkedプロパティを活用します。
Javascriptのcheckedプロパティへアクセスすることでそのオブジェクトがチェックされているかどうかが取得できますし、そのcheckedプロパティへtrue
やfalse
を代入することでラジオボタンのチェック有無を切り替えることができます。
基本的な使い方
// checkedプロパティを取得する場合
Javascriptオブジェクト.checked
// checkedプロパティを設定する場合
Javascriptオブジェクト.checked = true / false
次からは、実際のコードを見ながらその挙動を確認していきましょう。
Javascriptでラジオボタンの状態を取得する方法
まず最初は、ラジオボタンがチェックされているかどうかを確認する方法をご紹介していきます。
実装コード
<input type="button" onClick="checkRadio1()" value="ラジオボタン1の状態を確認">
<p id="test-text1"></p>
<input name="test-radio1" type="radio" id="radio-1">ラジオボタン1
<input name="test-radio1" type="radio">ラジオボタン2
<input name="test-radio1" type="radio">ラジオボタン3
<script>
const radioButton1 = document.getElementById("radio-1")
const text1 = document.getElementById("test-text1")
function checkRadio1() {
if (radioButton1.checked) {
text1.innerText = "ラジオボタン1がチェックされています。"
} else {
text1.innerText = "ラジオボタン1はチェックされていません。"
}
}
</script>
動作確認用
上記のように、javascriptオブジェクトのcheckedプロパティにアクセスすることで、そのボタンがチェックされているか(=true)されていないか(=false)を確認することができます。
【応用編】ラジオボタンがチェックされていればボタンを有効化する
続いては、応用編として、ラジオボタンが一つでもチェックされていればボタンを有効化するような機能を実装してみましょう。
実装コード
<input onChange="checkValue()" name="food" class="test-radio" type="radio" value="カレーライス">カレーライス
<input onChange="checkValue()" name="food" class="test-radio" type="radio" value="ラーメン">ラーメン
<input onChange="checkValue()" name="food" class="test-radio" type="radio" value="ハンバーグ">ハンバーグ
<input onChange="checkValue()" name="food" class="test-radio" type="radio" value="オムライス">オムライス
<input disabled="disabled" onClick="unCheckButton()" id="button" value="チェック解除">
<script>
const radioButtons = document.getElementsByClassName("test-radio")
const button = document.getElementById("button")
function checkValue() {
const checkArray = []
for (radioButton of radioButtons) {
checkArray.push(radioButton.checked)
}
button.disabled = !checkArray.some(value => value == true)
}
function unCheckButton() {
for (radioButton of radioButtons) {
radioButton.checked = false
}
checkValue()
}
動作確認用
上記のようにラジオボタンのcheckedプロパティへアクセスすることで、ラジオボタンがチェックされている場合のみボタンを有効にすることができます。
また、2つ目のメソッドで実装している通り、checkedプロパティを書き換えてあげることで、チェックの有無を切り替えることも可能です。
今回ご紹介したものは汎用性の高いものですので、フォーム機能などを実装する際にもぜひご活用くださいね。
最後に
さて、ここまでJavascriptを使ってラジオボタンの状態を取得・変更する方法について解説してきましたがいかがでしたか?
checkedプロパティは実際の開発でも頻繁に登場しますので、ぜひこの機会にマスターしておきましょう。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!