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

今回の記事は、

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


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

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

最後に

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

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

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト