jquery.cookie.jsで保存した複数のvalue値を別ページで全て表示させたい

Question

WordPressのカスタム投稿で350件ほどの商品を登録しています。

single-custom.phpで商品ページにチェックボックスを設け、
jquery.cookie.jsを使用してチェックが付けられたチェックボックスのvalue値をcookieに保存、
それをフォーム画面で表示させたいのですが、私が書いたコードでは何も表示されませんでした。

value値には、single-custom.phpのタイトルが入るようにしています（日本語、英数字、記号が入り乱れ）。
どこがいけなかったのか、教えていただけないでしょうか。

ソースコード

【single-custom.php】
<section>
  <input type="checkbox" id="checkBox" value="<?php the_title(); ?>" />
  <h2><?php the_title(); ?></h2>

～～～中略～～～

</section>

【フォーム画面】
<p id="output"></p>

jQuery(document).ready(function($) {
var productArr = document.getElementById("checkBox").value;
    $.cookie('productCheck', productArr, { expires: 100,path:'/'});
});

jQuery('#checkBox').click(function($){
    $.cookie("productCheck");
});

jQuery(document).ready(function($) {
  var productName = $.cookie("productCheck");
	document.getElementById('output').insertAdjacentHTML('afterbegin', productName);
});

補足情報

前提として、jQuery本体はヘッダーで読み込み、jquery.cookie.jsと私が書いたコードはフッターで読み込んでいます。

最初は document.getElementById("checkBox").value; ではなく、document.getElementById("checkBox"); にしていたら、
フォーム画面ではnullと表示されていました。

JavaScriptは初心者で上記のコードもいろいろなサイトを参照して書いたので継ぎはぎだらけだと思いますが、
どなたか教えていただけると幸いです。
どうぞよろしくお願いいたします。

さらに補足

※このコードはjsファイルを作成してフッターで読み込み

jQuery(document).ready(function($) {
var productArr = document.getElementById("checkBox").value;
    $.cookie('productCheck', productArr, { expires: 100,path:'/'});
});

$(function() {
    $('#checkBox').click(function() {
        var prodName = ($(this).prop("checked") ? $(this).val() : null);
        $.cookie('productCheck', prodName, {expires:100, path:'/'});
    });
});

※このコードは表示させたいページ内に記述

jQuery(document).ready(function($) {
  var productName = $.cookie("productCheck");
  $("#output1").val(productName);
});

【フォーム画面】
<input type="text" name="output" id="output1" value="">
<input type="text" name="output" id="output2" value="">
<input type="text" name="output" id="output3" value="">
<input type="text" name="output" id="output4" value="">
<input type="text" name="output" id="output5" value="">

このように分けたら表示されるようになりました。
また、表示させたい個所をpタグにしていましたが、フォームページのテキストボックス内に表示させたいため、一部修正しました。

本来は複数の値（最大5個）を表示させたいのですが、最後にチェックした値しか表示されません。
あと、テキストボックス1つにつき1つのvalue値を入れたいのですが、それもどうするのかわかりません。

Comments

[plasticgrammer]

チェックが付けられたもののvalueを保存するとのことですが、保存のタイミングはいつですか？
jQuery(document).ready、jQuery('#checkBox').click でのコードがありますが、チェックの状態は条件としていないですよね？テストのコードでしょうか？

[_airi_]

保存のタイミングは、チェックボックスをチェックした時です。

> チェックの状態は条件としていないですよね？
確かにそうですね、この条件を書いていませんでした。
この条件を付け加えると、

jQuery('#checkBox').click(function($){
if (checkBox.checked){
$.cookie("productCheck");
}
});

このような感じになるのでしょうか？

Answer 1

記載頂いている情報から、下記のようなコードになるイメージです。（動作未検証）

• document.readyでclickイベントハンドラを登録
• clickイベントハンドラで、checkされていればvalue値を、されていなければnull値を保存

// document.ready
$(function() {
    $('#checkBox').click(function() {
        var prodName = ($(this).prop("checked") ? $(this).val() : null);
        $.cookie('productCheck', prodName, {expires:100, path:'/'});
    });
});

Comments

[_airi_]

コードありがとうございます。
早速書き換えてみましたが、結果は変わらずでした。
何がいけないのでしょうか…。

補足ですが、チェックボックスを設置している商品ページと、表示させたいフォームがあるページは別のページです。

[_airi_]

表示させるためのコード

jQuery(document).ready(function($) {
var productName = $.cookie("productCheck");
document.getElementById('output').insertAdjacentHTML('afterbegin', productName);
});

この部分のみjsのファイルから削除し、フォームがあるページに記述したらvalue値が表示されました！

ただ、複数のvalue値を表示させたいのですが、最後にチェックしたvalue値しか表示されません。
最大5個くらいは表示できれば良いのですが、コードはどう書けば良いのでしょうか？

[plasticgrammer]

今は #checkBox というセレクタでid属性にて対象を指定していますが、これが複数あるとなるとid属性ではダメです。（そもそも複数の要素に同じIDを付けてはダメ）

また。cookieに保存するIDを（productCheck1、productCheck2のように）個別に変えるのであれば楽ですが、同じIDで管理するとした場合は別途色々な制御が必要になるかと思います。