jsで追加したクラスをリロードしても保持させたい

【やりたい事】
WordPressでお問い合わせフォームを作成しています。
「MW WP Form」プラグインを使用しています。
・未入力チェックを行いたい。
・問い合わせフォームで特定のラジオボタンにチェックを入れると追加項目が表示されるようにしたい。
例）問い「同居されている18歳未満のお子さんはいますか？」ラジオボタン「Yes」「No」
「Yes」にチェックをいれた場合、「同居されている18歳未満のお子さんの人数を入力してください」というテキストボックスを表示させたい。

JavaScript
1jQuery().ready(function ($) {
2    $(".check-more input[type='radio']").change(function() {
3        $("input[type='radio'][name='"+ $(this).attr("name")+ "']").each(function() {
4            if($(this).is(":checked")) {
5            $(this).parent().addClass("selected");
6            if($(".selsect").hasClass("selected")) {
7                $('.display-more').slideDown();
8            }
9        } else {
10            $(this).parent().removeClass("selected");
11            if(!$(".selsect").hasClass("selected")) {
12                $('.display-more').slideUp();
13            }
14        }
15    });
16});

html
1<dl class="question1 check-more">
2    <dt>同居されている18歳未満のお子さんはいますか？</dt>
3    <dd>
4        <label class="selsect"><input name="radio1" type="radio" value="yes"><span>Yes</span></label>
5        <label><input name="radio1" type="radio" value="no"><span>No</span></label>
6    </dd>
7</dl>
8<dl class="question2 display-more">
9    <dt>同居されている18歳未満のお子さんの人数を入力してください</dt>
10    <dd><input type="text" name="text1"></dd>
11</dl>

【問題点】
送信ボタンを押した時にエラーチェックにひっかかるとページが更新されてしまうため、jsで付与した「selsected」クラスが外れてしまいます。
入力し直しとなってしまうため、リロードされてもクラスを保持させたままにする良い方法はないでしょうか？
js以外の方法でも構いません。

yambejp

2021/09/09 10:36

selsectedクラスはホントにいりますか？チェックされているかどうかcheckedで判断すればよいのでは？

uzr1709

2021/09/09 10:52 編集

回答ありがとうございます。まだ開発途中なのでクラス名を「selsected」としていますが、cssでの装飾にも使用しておりますのでクラスを付与しております。紛らわしいクラス名ですみません。 checkedで判断した場合もリロードされるとチェックが外れてしまうので結果は同じになってしまいます。また選択して欲しい項目なので初めからどちらかにチェックを入れておくことは考えておりません。

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

回答1件

自己解決

ヒントありがとうございました。
checkedで判定するようにしたら理想の動きになりました。

リロードするとcheckedが外れてしまう現象はラジオボタンを「MW WP Form」のフォーム部品を使用する事で解決しました。

JavaScript
1if($('input[value="valueyes"]').prop("checked")){
2    $('.display-more').css('display','block');
3}
4$(".affiliation input[type='radio']").change(function() {
5    value = $(".check-more input[type='radio']:checked").val();
6    switch (value) {
7        case "valueyes":
8            $('.display-more').slideDown();
9            break;
10        case "valueno":
11            $('.display-more').slideUp();
12            break;
13    }
14});