jQueryでラジオボタンのにvalで値をセットできないときの対処方法

この記事ではjQueryにおいて、ラジオボタンのinputにvalで値をセットできないときの対処方法を紹介します。

=== 目次 ===

例
対策
まとめ

例

以下のようなHTML+JavaScript(jQuery)を実行してもラジオボタンにチェックは入りません。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
                $(() => {
                    $("input[name=radioTest]").val(1)
                });
        </script>
    </head>
    <body>
        <input type="radio" name="radioTest" id="radio_0" value="0">
        <label for="radio_0">0</label><br>
        <input type="radio" name="radioTest" id="radio_1" value="1">
        <label for="radio_1">1</label><br>
        <input type="radio" name="radioTest" id="radio_2" value="2">
        <label for="radio_2">2</label><br>
    </body>
</html>

下図は上記のコードを実行したときの結果です。

正しくラジオボタンが選択できていませんね。

次のセクションでは対策方法を紹介します。

対策

valの箇所で配列を使用すると動作するようになります。

具体的にはval(1)→val([1])としてやります。

以下、サンプルコードです。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
                $(() => {
                    $("input[name=radioTest]").val([1])
                });
        </script>
    </head>
    <body>
        <input type="radio" name="radioTest" id="radio_0" value="0">
        <label for="radio_0">0</label><br>
        <input type="radio" name="radioTest" id="radio_1" value="1">
        <label for="radio_1">1</label><br>
        <input type="radio" name="radioTest" id="radio_2" value="2">
        <label for="radio_2">2</label><br>
    </body>
</html>

valの引数を配列とした上記のコードを実行すると下図ように問題なくラジオボタンが選択できていることがわかります。

まとめ

この記事ではjQueryにおいて、ラジオボタンのinputにvalで値をセットできないときの対処方法を紹介しました。