jQuery inputに入力した値を保存したい。

例えば、txtInputに " test " と文字列を入れます。
その後checkboxにチェックを入れると txtInput内の文字列は"保存しました"に変更されます。

やりたいこと:
checkboxを外したら、最初に入れた test（例）に戻したいです。
例なので、文字列はユーザーが何を入れるかで変わります。

.change内では変数に保存できない(保持できない)ことは大体わかっています。
どのような方法がありますでしょうか？ご教授よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5</head>
6<body>
7<input name="chkInput" type = "checkbox" value = "">
8<input name="txtInput" type = "text" value="">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10<script type="text/javascript">
11	$('input[name="chkInput"]').change(function(){
12	var state = $(this).val();
13	  if(state == ''){
14	  	$(this).val("on");
15	  	var saveVal = $('input[name="txtInput"]').val();
16	  	$('input[name="txtInput"]').val("保存しました");
17	  }else{
18	  	$(this).val("");
19	  	$('input[name="txtInput"]').val(saveVal); //ここで入力した値に戻したい。
20	  }
21	});
22</script>
23</body>
24</html>

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

回答2件

こんにちは

以下は、data-* 属性を保存場所として使う例です。

javascript
1$('input[name="chkInput"]').change(function(){    
2    const text = $('input[name="txtInput"]');
3    if($(this).prop('checked')) {
4       text.data('value', text.val()).val('保存しました');     
5    } else {
6       text.val(text.data('value')); 
7    }
8});

動作確認用CodePen: https://codepen.io/jun68ykt/pen/NWKXNjr

他の保存場所としては、

別の画面からも、保存した値を使いたい場合： sessionStorage
ブラウザを閉じた後も、消えず、次にブラウザを開いたときに使いたい場合： localStorage

などが考えられます。
以上、参考になれば幸いです。

投稿2019/09/05 16:21

jun68ykt

総合スコア9058

ベストアンサー

js
1window.valuesStorage = {};
2$('input[name="chkInput"]').change(function(){
3    if($(this).checked){
4        window.valuesStorage.txtInput = $('input[name="txtInput"]').val();
5        $('input[name="txtInput"]').val("保存しました");
6    }else{
7        $('input[name="txtInput"]').val(window.valuesStorage.txtInput || '');
8    }
9});