MW WP form ラジオボタンの選択を切り替えた時に、テキスト入力欄の値をクリアする方法

Question

前提

WPにて、
MW WP formを使ってフォーム構築をしております。

実現したいこと

ラジオボタンの選択肢で、
「その他」を選んだ時のみ、その他用の入力欄を表示させているのですが、

入力画面の段階で、
一度「その他」を選択＆その他入力欄に記載したとしても、
その後別の選択肢に変更した場合に、その他入力欄に記載されていた値をクリア（リセット）する方法を教えていただけますと幸いです。

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

「その他」を選び、その他入力欄に何か記載がある状態で確認画面に進む
→その後、戻るボタンで入力画面に戻る
→選択肢を「その他」以外に変える（この時点で「その他」の入力欄自体は非表示になる
→この状態で確認画面に進む

すると、選択肢自体は選び直した「その他」以外になっているのですが、
その他入力欄に記載の内容が残ってしまっており、困っています。

該当のソースコード

<div class="size_item">
<p class="size_item_txt">サイズ</p>
	<span class="mwform-radio-field horizontal-item">
		<label>
			<input type="radio" name="size_1" value="S">
			<span class="mwform-radio-field-text">S</span>
		</label>
	</span>
	<span class="mwform-radio-field horizontal-item">
		<label>
			<input type="radio" name="size_1" value="M">
			<span class="mwform-radio-field-text">M</span>
		</label>
	</span>
	<span class="mwform-radio-field horizontal-item">
		<label>
			<input type="radio" name="size_1" value="L">
			<span class="mwform-radio-field-text">L</span>
		</label>
	</span>
	<span class="mwform-radio-field horizontal-item">
		<label>
			<input type="radio" name="size_1" value="LL">
			<span class="mwform-radio-field-text">LL</span>
		</label>
	</span>
	<span class="mwform-radio-field horizontal-item">
		<label>
			<input type="radio" name="size_1" value="その他">
			<span class="mwform-radio-field-text">その他</span>
		</label>
	</span>

<input type="hidden" name="__children[size_1][]" value="{&quot;S&quot;:&quot;S&quot;,&quot;M&quot;:&quot;M&quot;,&quot;L&quot;:&quot;L&quot;,&quot;LL&quot;:&quot;LL&quot;,&quot;\u305d\u306e\u4ed6&quot;:&quot;\u305d\u306e\u4ed6&quot;}">


<input type="text" name="size_other_1" class="size_other size_other_1" size="60" value="" placeholder="その他入力欄" style="display: none;">


</div>

.size_other {
    /* 非表示デフォルト */
    display: none;
}

$(function () {
    // size_1
    $('[name="size_1"]:radio').change(function () {
        var result = $("input[name='size_1']:checked").val();
        if (result === 'その他') { //その他を選んだ場合
            $('.size_other_1').css('display', 'block');
        } else if (result !== 'その他') { //その他以外を選んだ場合
            $('.size_other_1').css('display', 'none');
        }
    }).trigger('change');
});

試したこと

こちらを参考に、下記の追加部分のみ変更してみましたが、
反映されずでした。
https://web-tsuku.life/input-text-form-clear/

$(function () {
    // size_1
    $('[name="size_1"]:radio').change(function () {
        var result = $("input[name='size_1']:checked").val();
        if (result === 'その他') { //その他を選んだ場合
            $('.size_other_1').css('display', 'block');
        } else if (result !== 'その他') { //その他以外を選んだ場合
            $('.size_other_1').css('display', 'none');
//追加した部分以下
            $('.size_other_1').value = '';
//追加した部分ここまで
        }
    }).trigger('change');
});

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

ここにより詳細な情報を記載してください。

Answer 1

こうではないでしょうか

//追加した部分以下
            $('.size_other_1').val('');
//追加した部分ここまで

https://itsakura.com/jquery-textbox

Comments

[pippi_385]

いただいた回答で動きました！
助かりました。ありがとうございました！