前提・実現したいこと
お世話になっております。チェックボックスとそれに付随するvalueもしくはtextContentの値を別タグ内に表示したいと考えております。※ここがクリックされているよというような案内用に考えております。
プログラミングの勉強を始めたばかりで上手い方法が思いつきません。アドバイスをいただけると大変助かります。JSで実装する方法とinputのcheckboxを組み合わせる方法など色々試しているのですが、なかなか思うような挙動になってくれません。
チェックをつける→表示、チェックを外す→表示を消すとしたいが、JSのみパターンだと、チェックを繰り返すたびに同じ項目の表示が増えていってしまうし、チェックボックスだといくつ選択しても1項目しか表示しないという感じになってしまいます。
このような処理をJS、HTML、CSSで実装することは可能でしょうか?
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>practice</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 </head> 8 <body> 9 10 <div class="switch-menu"> 11 <p class="reflect"></p> 12 <!-- チェック項目を反映させる --> 13 </div> 14 <p>JSでチェックボックスを再現する</p> 15 <div class="industry-choice"> 16 17 <div class="checkbox"> 18 <div class="checked"></div> 19 </div> 20 <p class="list">categoryA</p> 21 </div> 22 <div class="industry-choice"> 23 24 <div class="checkbox"> 25 <div class="checked"></div> 26 </div> 27 <p class="list">categoryB</p> 28 </div> 29 30 <p>チェックボックスを使う</p> 31 32 <input type="checkbox" name="c" value="AD" class="input">X 33 <input type="checkbox" name="c" value="SD" class="input">Y 34 35 36 37 <script src="js/main.js"></script> 38 39 </body> 40</html> 41 42
CSS
1body { 2width: 1400px; 3margin: 0; 4} 5 6 7 8.switch-menu { 9 width: 1400px; 10 height: 120px; 11 background: #E9EEEF; 12} 13 14 15.industry-choice { 16 display: flex; 17 height: 50px; 18 19} 20 21.flex { 22 display: flex; 23} 24 25/* チェックボックスとチェック用 */ 26.checkbox { 27 border-top: 10px; 28 margin: 10px; 29 width: 16px; 30 height: 16px; 31 border: solid 2px #D9D9D9; 32} 33 34.checkin { 35 width: 8px; 36 height: 8px; 37 background: #00AED9; 38 margin: 4px; 39} 40 41.list { 42 font-size: 13px; 43 padding-top: 11px; 44 margin: 0px; 45} 46 47
JS
1'use strict'; 2 3{ 4 5 6 const industryList = document.querySelectorAll('.industry-list'); 7 const plus = document.querySelectorAll('.plus'); 8 for (let i = 0; i < plus.length; i++) { 9 plus[i].addEventListener('click', () => { 10 industryList[i].classList.toggle('hidden'); 11 plus[i].textContent = plus[i].textContent === '+' ? '-' : '+'; 12 }); 13 } 14 15 // チェックボックスをクリックするイベント 16 const checkbox = document.querySelectorAll('.checkbox'); 17 const checked = document.querySelectorAll('.checked'); 18 const list = document.querySelectorAll('.list'); 19 const reflect = document.querySelector('.reflect') 20 const array = []; 21 22 for (let i = 0; i < checkbox.length; i++) { 23 checkbox[i].addEventListener('click', () => { 24 checked[i].classList.toggle('checkin'); 25 if (checked[i].classList.contains('checkin')) { 26 array.push(list[i].textContent); 27 reflect.textContent = array; 28 } 29 }); 30 } 31 32 const input = document.querySelectorAll('.input'); 33 for (let i = 0; i < input.length; i++) { 34 input[i].addEventListener('change', () => { 35 reflect.textContent = input[i].value; 36 }) 37 } 38 39} 40 41
補足情報(FW/ツールのバージョンなど)
ATOM、CHROME最新
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/20 13:30