実現したいこと
- チェックボックスを画像クリック型にし、10個の選択肢の中から2つを選ぶ。なお、画像は2つまでしか選べないようにし、3つ目を選択するとアラートが表示されるようにしたい。
- 画像を2つ選んで決定ボタンを押すと、別ページに遷移し、その画像が表示されるようにしたい。
前提
サーバーを介さず、ローカル環境にて表示できるようにしたい。
javascriptに関しては知識が浅く、localStorageやsessionStorageに関しても調べながらの導入となっており無知な部分が多いです。
発生している問題・エラーメッセージ
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12163345197
上記を参考に制作してみたのですが、ページ遷移もできず、何も表示が変わらない状況です。
実現したいことの1は想定どうりの表示ですが、2が全く表現できておりません。
該当のソースコード
index.html
1 <body> 2 <main> 3 <div class="hoge"> 4 <div class="list"> 5 <form name="selectData" action="javascript:setData()"> 6 <div class="check"> 7 <input type="checkbox" id="check-1" name="checkbox" value="男1"/> 8 <label for="check-1" class="label"> 9 <img src="https://placehold.jp/150x150.png"> 10 </label> 11 </div> 12 <div class="check"> 13 <input type="checkbox" id="check-2" name="checkbox" value="男2"/> 14 <label for="check-2" class="label"> 15 <img src="https://placehold.jp/3d4070/ffffff/150x150.png"> 16 </label> 17 </div> 18 <div class="check"> 19 <input type="checkbox" id="check-3" name="checkbox" value="男3"/> 20 <label for="check-3" class="label"> 21 <img src="https://placehold.jp/3e704d/ffffff/150x150.png"> 22 </label> 23 </div> 24 <div class="check"> 25 <input type="checkbox" id="check-4" name="checkbox" value="男4"/> 26 <label for="check-4" class="label"> 27 <img src="https://placehold.jp/5c703e/ffffff/150x150.png"> 28 </label> 29 </div> 30 <div class="check"> 31 <input type="checkbox" id="check-5" name="checkbox" value="男5"/> 32 <label for="check-5" class="label"> 33 <img src="https://placehold.jp/703e5b/ffffff/150x150.png"> 34 </label> 35 </div> 36 <div class="check"> 37 <input type="checkbox" id="check-6" name="checkbox" value="男6"/> 38 <label for="check-6" class="label"> 39 <img src="https://placehold.jp/705b3e/ffffff/150x150.png"> 40 </label> 41 </div> 42 <div class="check"> 43 <input type="checkbox" id="check-7" name="checkbox" value="男7"/> 44 <label for="check-7" class="label"> 45 <img src="https://placehold.jp/91c039/ffffff/150x150.png"> 46 </label> 47 </div> 48 <div class="check"> 49 <input type="checkbox" id="check-8" name="checkbox" value="男8"/> 50 <label for="check-8" class="label"> 51 <img src="https://placehold.jp/3942c0/ffffff/150x150.png"> 52 </label> 53 </div> 54 <div class="check"> 55 <input type="checkbox" id="check-9" name="checkbox" value="男9"/> 56 <label for="check-9" class="label"> 57 <img src="https://placehold.jp/c0bc39/ffffff/150x150.png"> 58 </label> 59 </div> 60 <div class="check"> 61 <input type="checkbox" id="check-10" name="checkbox" value="男10"/> 62 <label for="check-10" class="label"> 63 <img src="https://placehold.jp/c04e39/ffffff/150x150.png"> 64 </label> 65 </div> 66 <input type="submit" id="submit"> 67 </form> 68 </div> 69 </div> 70 </main> 71 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 72 <script type="text/javascript" src="js/common.js"></script> 73 <script type="text/javascript"> 74 function setData(){ 75 var item = document.selectData.item; 76 var arr = new Array(); 77 for(var i=0;i<item.length;i++){ 78 if( item[ i ].checked ){ arr.push( item[ i ].value ) } 79 } 80 sessionStorage.setItem( "key", arr.join(";") ); 81 location.href = "./pic.html"; 82 } 83 </script> 84 </body>
common.js
1function() { 2 const checkMax = 2; 3 const checkBoxes = document.getElementsByName('checkbox'); 4 5 function checkCount(target) { 6 let checkCount = 0; 7 checkBoxes.forEach(checkBox => { 8 if (checkBox.checked) { 9 checkCount++; 10 } 11 }); 12 if (checkCount > checkMax) { 13 alert('最大2つまで'); 14 target.checked = false; 15 } 16 } 17 18 checkBoxes.forEach(checkBox => { 19 checkBox.addEventListener('change', () => { 20 checkCount(checkBox); 21 }) 22 }); 23};
●遷移先
second.html
1<body> 2 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 3 <script type="text/javascript" src="js/common.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function() { 6 if( window.sessionStorage ){ 7 var data = sessionStorage.getItem( "key" ); 8 if( data ){ 9 //----] データを配列にする 10 var arr = data.split( ";" ); 11 //----] <body> 内にデータを <ul>-<li> で書き出し 12 var body = document.body; 13 var ul = body.appendChild( document.createElement("ul") ); 14 for(var i=0;i<arr.length;i++){ 15 var li = ul.appendChild( document.createElement("li") ); 16 li.appendChild( document.createTextNode( arr[ i ] ) ); 17 } 18 } 19 } 20 }); 21 </script> 22 </body>
調査したこと・試したこと
sessionStorageではうまく行かないのかもと思い、localStorage.setItemやlocalStorage.getItemに置き換えてみましたが変化なしでした。
こちらのページのやり方で、テキストの値保持とページ遷移はできたのですが、複数チェックボックスの値の受け渡しがわからず断念しました。
https://magazine.techacademy.jp/magazine/32448
こちらのcookie.jsを使ったやり方も試してみましたがダメでした。
https://code-base.jp/javascript%E3%81%A7checkbox%E3%81%AE%E5%80%A4%E3%82%92%E3%83%9A%E3%83%BC%E3%82%B8%E7%A7%BB%E5%8B%95%E3%81%A7%E5%BC%95%E3%81%8D%E7%B6%99%E3%81%90%E6%96%B9%E6%B3%95/
0 コメント