

### 実現したいこと

  * ラジオボタンの選択保持

### 前提

この質問はマルチポストです。  
下記URLでも質問しています。  
<https://teratail.com/questions/9pkuzcnadxkgq6>

プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。  
「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-29/e191530e-99b4-49ef-
ac9c-d99b9698eb76.png)  
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-29/b2b5a255-9067-4fc8-a1c7-06a1e95384c9.png)  
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-29/2897e973-d5fd-4e3b-a4ac-4fe35016b91d.png)

### 発生している問題・エラーメッセージ

「送信」ボタンを押した後には、checked属性のラジオボタンが消去している。

### 該当のソースコード

[code]

    　//ラジオボタンの設置
        $('input[name="regular_price"]').before(
          '<label class="price_radio1"><input type="radio" name="price_radio2" id="radio3" value="10"> 10円</label>'
        );
        $('input[name="regular_price"]').before(
          '<label class="price_radio2"><input type="radio" name="price_radio2" id="radio4" value="20"> 20円</label>'
        );
    
    　　//テキストボックスの非表示
        $('input[name="regular_price"]').css("opacity", "0");
        $('input[name="sale_price"]').css("opacity", "0");
    
    　　//ラジオボタンの内容をテキストボックスに埋め込む
        $(document).on("change", "input[name=price_radio2]", function () {
          const i = this;
          if ($(i).is(":checked")) {
            $('input[name="regular_price"]').val($(i).val());
          }
        });
    
        // テキストボックスの要素を取得
        const number = document.getElementById("regular_price");
    
        // ラジオボタンの要素を取得
        const radio = document.querySelectorAll(
          'input[type="radio"][name="price_radio2"]'
        );
    
        // テキストボックスの値が変更されたときのイベントリスナーを追加
        const input = parseInt(number.value);
    
        // テキストボックスの値に応じてラジオボタンを選択済みにする。
        if (input === 10) {
          $("#radio3").prop("checked", "checked"); // 10のラジオボタンを選択
        } else if (input === 20) {
          $("#radio4").prop("checked", "checked"); // 20のラジオボタンを選択
        } else {
          // 10と20以外の値の場合は選択を解除
          radio.forEach(function (ra) {
            ra.checked = false;
          });
        }
    
[/code]

[code]

    // フックする関数
    function custom_enqueue($hook_suffix)
    {
      // 新規投稿または編集画面のみ
      if ('post.php' === $hook_suffix || 'post-new.php' === $hook_suffix || 'wcfm-content.php' === $hook_suffix) {
        // 読み込むスクリプトファイル(※依存関係:jquery)
        wp_enqueue_script('script_js', get_stylesheet_directory_uri() . '/script.js', array('jquery'));
        wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
      }
    }
    // "custom_enqueue" 関数を管理画面のキューアクションにフック
    add_action('admin_enqueue_scripts', 'custom_enqueue');
    
[/code]

### 試したこと

・.prop("checked", "checked")の代わりに、  
.checked = true  
.attr("checked")  
.prop("checked", true)  
を入力

・inputタグにonclick属性を埋め込む。

### 補足情報（FW/ツールのバージョンなど）

Wordpress6.4.1バージョン  
使用テーマ：Common child  
OS：Windows11


CC BY-SA 4.0
2023-11-30T02:53:18.030
96938
2023-11-30T04:30:44.360
2023-11-30T04:30:44.360
60573
60573
question
javascript php html css
【ラジオボタンの選択保持】「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。