ラジオボタンによる条件分岐がわかりません

jsの基礎勉強をしています。
ラジオボタンを使って条件分岐をしたくて以下の様なコードを書きましたが今のままでは初期値を取得できません。
初期値の値も取得したいのですがどうしたら良いでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="js" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7  </head>
8  <body>
9    <div class="test">
10      <form id="target" action="index.html" method="post">
11        <input type="radio" name="type" value="作成" checked>作成
12        <input type="radio" name="type" value="選択">選択
13      </form>
14    <script type="text/javascript" src="canvas.js"></script>
15  </body>
16</html>
17

javascript
1$(function(){
2      $('input[name="type"]:radio').change(function(){
3        var radioval = $(this).val();
4        if (radioval === "作成") {
5          console.log("作成を選択");
6        }else if (radioval === "選択") {
7          console.log("選択を選択");
8        }else {
9          console.log("選択されてません")
10        }
11      });
12    });

現状ではラジオボタンを切り替えたときにlogが発生しますが初期値の値は取れません。
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1$(function(){
2  $('input[name="type"]').on('change',function(){
3    var radioval = $('input[name="type"]:checked').val();
4    if (radioval === "作成") {
5      console.log("作成を選択");
6    }else if (radioval === "選択") {
7      console.log("選択を選択");
8    }else {
9      console.log("選択されてません");
10    }
11  }).eq(0).trigger('change');
12});

投稿2021/01/17 02:50

yambejp

総合スコア116724

kai

2021/01/18 04:04

triggerは知りませんでした！調べてやってみたらできました！ありがとうございました。

行動規範の内容に同意します

changeでのみイベントを取っているからですね。
これは、変更があった時に発生するイベントなので最初の値が取れません。

onload系のページ読み込み時に発生するイベントでも取るようにすると良いと思います。
jQueryだとon()とready()あたりでしょうか。

参考ページ
https://www.flatflag.nir87.com/ready-1363

補足

trigger()であればchangeイベントを起こせる事に気づいたので初期回答と付随コメントは間違っているんですが、質疑応答の関係もあるので残します。

投稿2021/01/16 17:21

編集2021/01/17 07:05

退会済みユーザー

総合スコア0

退会済みユーザー

2021/01/16 17:43

よくよく見たらHTML側でcheckedを指定してましたね。それだったらon()とか使わずに、いきなり【$(input[name="type"]:radio).val()】とやっても取れますかね。 changeイベントハンドラの中ではどっちみち取れませんが…。

kai

2021/01/17 06:40

回答ありがとうございます。ということはchangeイベントとは別にページ読み込みの際に var radioval = $(input[name="type"]:radio).val(); で値をとるということであってますでしょうか？

退会済みユーザー

2021/01/17 06:59

私の意見としてはおっしゃる通りです。まあ、案が浮かんだのであれば聞く前にまずはコードを書くクセを付けましょう。ちなみに、yambejpさんの回答だとchangeイベントをtriggerがポイントですね。初期値に関しては『あー、それがあったか！』と悔しがっております。ナイスtrigger！もう一つ radioval の取り方が変わっていますね。確かに、ユーザが操作をするとそれが付くようになります。 ※納得ポイントを調べてみると理解が深まるかもしれません。頑張って下さい。

kai

2021/01/18 04:03

mahnyさんのアドバイス通りで実行したら初期値を取ることができました。ありがとうございました。

行動規範の内容に同意します

あなたの回答