複数のinputを別々にリセットしたい

inputをメインとオプションの二種類作って、オプションをリセットしてもメインに影響が出ないようにしたいです。
そのため、formではなくinputでリセットする方法を探しています。

<body>
    <form id="form1" method="POST" >
        <input type="text" name="text1" id="text1" />
        <input type="submit" value="submit" />
    </form>

　　<form id="option">
    <input type="text" class="option" name="text2" id="text2" form="form1" />
    <input type="radio" class="option" name="radio" id="radio" form="form1" />
    <input type="checkbox" class="option" name="checkbox" id="checkbox" form="form1" />
　　</form>
</body>

text2以下のinputにしか影響がでないようにformを分けると、
optionへのreset()が動作しません。

<form id="option">をはずすとreset()に相当する方法が見つかりませんでした。

$('input.option').each(function() {
                      $(this).checked = $(this).defaultChecked;
                  });

例えばこのようにするとundifinedが返ります。

どなたかいいやり方をご存知ではありませんか。
よろしくお願いします。

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

回答1件

ベストアンサー

formが別れている時点で送られるパラメータも違うので
リセットを連携する意味があまりないように思いますが

javascript
1<script>
2$(function(){
3  $('#reset').on('click',function(){
4    $(':checkbox').prop('checked',function(){return $(this).prop('defaultChecked');});
5  });
6});
7</script>
8<input type="checkbox" checked>
9<input type="checkbox" >
10<input type="button" id="reset" value="reset">

投稿2021/02/17 03:22

yambejp

総合スコア116694

keraker

2021/02/17 04:07

ありがとうございます。無事、機能しました。 scriptの書き方が良くなかったようですね。ほかの場所をクリックしたら最初のスクリプトが動くように書いていたのですが、よろしければ自分が書いたものは何を意味しているのか、簡単でいいので教えてはいただけませんか。よろしくお願いします。

keraker

2021/02/17 04:09

ちなみに最初に参考にしたのは以下です。 https://stackoverflow.com/questions/2079185/reset-input-without-form&usg=ALkJrhhhB-qCgx-sqJIexQevp44Ok_HQyw

yambejp

2021/02/17 04:14 編集

jQueryのオブジェクトはプロパティへのアクセスを propメソッドを通じておこないます。 $(・・・).checkedのような書き方はjQueryライクではありません生のjsならobject.checkedのようなアクセス方法になります

keraker

2021/02/17 04:26

つまり、混ぜると機能しない場合があるということでよろしいでしょうか。

yambejp

2021/02/17 04:30

機能しますよ混ぜ方が間違っているという話です

keraker

2021/02/17 04:45

ありがとうございます。では $('input.option').each($(function() { $(this).checked = $(this).defaultChecked; })); のようにfunctionを$で囲めばよかったのでしょうか。 ”jquery javascript 混在”で調べてみたのですが、できるということしか書いてないページが多いので、混ぜ方に関しての検索用のキーワードを教えていただけるとうれしいです。

yambejp

2021/02/17 04:51

どうしてもやりたいならこう $('input.option').each(function() { $(this).get(0).checked = $(this).get(0).defaultChecked; });

keraker

2021/02/17 04:52

もとになったものをよく見てみたら、 this.value = this.defaultValue とあったので$(functionではなく$(this)のほうで、 $(this)はつかわない、または$(this)にdefaultCheckedというプロパティはないということでしょうか。

keraker

2021/02/17 04:54

$(this)はあるのですね。プロパティはこのままではアクセスできなかったということでしたか。ご教授いただきありがとうございました。

yambejp

2021/02/17 04:58

注意スべきは、できるかできないかが判断基準ではなく jQueryを利用する限り、なるべく生のJSを意識しない書き方が肝要ということです。一貫性がないと可読性もおちバグに繋がりやすくなります。