jqueryにてチェックを使用して処理を変えたい。

以下の形でチェックボックスを作成。
チェックした時、なしの時で遷移する1ページを表示する場合と、しない場合にわけています。
チェックボックスにチェックしてもなしにしても機能しません。
これは何かif文などいれて制御が必要なのでしょうか。

<!DOCTYPE html>
<html>
<head>
<title>makeQRコード 設定</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
body {
	margin-top: 30px;
  	margin-right: 10px;
  	height:100%;
	width: 100%;
}
</style>
</head>
<body>
	<input type="checkbox" class="is-confirm">確認画面を表示する

<script type="text/javascript">
$(function () {
	var isConfirm = window.localStorage.getItem("isConfirm");
	$('.is-confirm').prop('checked', isConfirm);
	$('.is-confirm').on('click', function () {
		window.localStorage.setItem("isConfirm", $(this).prop('checked'));
	});
});//終わり
</script>
</body>
</html>

yambejp

2020/10/16 03:47

場合分けと書いていますが、特に分岐が見られないですが・・・

m.ts10806

2020/10/16 03:53

単にlocalStorageに保存するだけの処理しか書かれてないようですが、どういう結果を期待して書いた処理なのでしょうか。

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

回答1件

ベストアンサー

こんな感じでどうでしょうか。

$(function(){

    $('.is-confirm').on('change', function(){
            var isConfirm = window.localStorage.getItem("isConfirm");
            $('.is-confirm').prop('checked', isConfirm);
            $('.is-confirm').on('click', function () {
                window.localStorage.setItem("isConfirm", $(this).prop('checked'));
            });
    });
    
});

投稿2020/10/16 03:51