【Javascript】ラジオボタンの状態を取得・変更する方法【コピペで動きます】

今回の記事は、

  • Javascriptでラジオボタンを扱う方法を知りたい
  • ラジオボタンで選択されている値を取得したい
  • ラジオボタンがチェックされているかどうか確認したい

というお悩みをお持ちの方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

Javascriptでラジオボタンを扱う方法

それではまずはJavascriptでラジオボタンを扱う方法を確認していきましょう。

Javascriptでラジオボタンを扱うには、checkedプロパティを活用します。

Javascriptのcheckedプロパティへアクセスすることでそのオブジェクトがチェックされているかどうかが取得できますし、そのcheckedプロパティへtruefalseを代入することでラジオボタンのチェック有無を切り替えることができます。

基本的な使い方

// 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プロパティを書き換えてあげることで、チェックの有無を切り替えることも可能です。

今回ご紹介したものは汎用性の高いものですので、フォーム機能などを実装する際にもぜひご活用くださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使ってラジオボタンの状態を取得・変更する方法について解説してきましたがいかがでしたか?

checkedプロパティは実際の開発でも頻繁に登場しますので、ぜひこの機会にマスターしておきましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。