• jQuery

【簡単jQuery】radioボタンのcheckedを取得し、value値によってイベントを発火する方法。

jQueryを使ってradioボタンでチェックした要素（checkedが付与された要素）を取得する方法を知りたい

チェックした要素の値（value）を取得し、値によってイベントを発火したい。

本記事ではこのような悩みを解決します。

実装方法は以下の通りです。

※jQueryを使うので事前にライブラリを準備しましょう。

radioボタンhtmlサンプル

  <label><input type="radio" name="choice" value="男性"><span>男性</span></label>
  <label><input type="radio" name="choice" value="女性"><span>女性</span></label>
<div class="male"></div>
<div class="woman"></div>

例として、name属性がchoice、value値が男性、女性が入力されてるradioボタンがあります。

最後の章でradioボタンの男性をチェックしたらmaleクラスが入ってるdiv要素の値に男性を入れる、女性をチェックしたらwomanクラスが入ってるdiv要素の値に女性を入れるというイベントを発火したいと思います。

radioボタンのchecked値を取得する。

<script>
  $(document).ready(function() {
   //radioボタンのname属性choiceをクリックしたら
    $("input[name='choice']").click(function() {
  //変数valueにcheckedされたradioボタンのvalue値を取得する
      value = $("input[name='choice']:checked").val();
    });
  });
</script>

上記がチェックされたradioボタンの値を取得するコードです。

 $("input[name='choice']").click(function() {});

まず最初にclick関数を使ってradioボタンがチェックされたらという式を書きます。

$("input[name='choice']:checked").val();

チェックされた要素をセレクタで指定する際は:checkedを使います。

後はclick関数内で上記セレクタとvalメソッドを使えばチェックされた値を取得できます。

チェックされた要素によってイベント発火

<script>
  $(document).ready(function() {
   //radioボタンのname属性choiceをクリックしたら
    $("input[name='choice']").click(function() {
  //変数valueにcheckedされたradioボタンのvalue値を取得する
      value = $("input[name='choice']:checked").val();
      switch (value) {
        case "男性":
          $(".male").text("男性");
          break;
        case "女性":
          $(".woman").text("女性");
          break;
      }
    });
  });
</script>

最後にチェックされた要素によってイベントを発火します。

switch関数を使う事で簡単にチェックされた値によって条件分岐できます。

前章で取得したvalue値を変数valueに入れます。

switch関数をclick関数内で定義し、引数にvalue変数を入れます。

任意のcase値を入力し、case値がvalue値と等しい場合はcase句以降の処理を実行。

実行後はbreak;を使って処理を終わらせます。

今回のコード例だとcase値に男性が入ってたらtextメソッドを使ってmaleクラスのdiv要素に文字列：男性を入れる、女性だったらwomanクラスのdiv要素に文字列：女性を入れます。

以上の方法でチェックされたradioボタンの値を取得、値によって条件分岐しイベントを発火する処理の完成です。

まとめ

if文でも条件分岐ができますが、switch文を使うとコードを減らせて且つ簡単に条件分岐式をたてれるので便利です。

以上で解説を終わります。