javascriptにてcheckboxで送信した値が存在するかチェックしたい

Question

質問内容

現在、チェックボックスで店舗を選択し、選択店舗追加ボタンを押下するとulテーブルの中に動的にliタグを付与し出力するプログラミングを実装しています。
しかし、test1店をチェックしボタン押下で追加した後に再度、選択店舗追加ボタンを押下すると新たにtest1店が追加されてしまいます。
なので、既にulテーブルの中に選択した店舗の値が存在する場合、処理を無視するというのを実装したいのですがどうすればいいでしょうか？

<input type="checkbox" value="test1店" name="store">test1店<br>
<input type="checkbox" value="test2店" name="store">test2店<br>
<input type="checkbox" value="test3店" name="store">test3店<br>
<input type="button" class="btn btn-primary" value="選択店舗追加" onclick="storecheck();">
<td>
  <ul id="storeul">
  </ul>
</td>

function storecheck() {
    var str = '';
    var store = document.getElementsByName("store");
    var storeul = document.getElementById("storeul");
    var flag = false;
    for (var i = 0; i < store.length; i++) {
      if (store[i].checked) {
        flag = true;
        var li = document.createElement("li");
        str = (store[i].value);
        li.textContent = str;
        storeul.appendChild(li);
      }
    }
    if (!flag) {
      alert("項目が選択されていません");
    }
  }

Comments

[yambejp]

追加したものを削除する必要はないのでしょうか？

[leysxxk]

yambejp様、コメントありがとうございます。
削除に関してはvar deletebutton = document.createElement("button");で自動生成したのちに、storeul.appendChild(deletebutton);で付与してあげて、ボタンを押下すると対象の店舗を削除していく実装を考えています。

[yambejp]

たとえば3を挿入後2を挿入するとリストの順番が3,2となりますが、順番にこだわりはありませんか？

[leysxxk]

ご指摘ありがとうございます。
たしかにそうですね。。
順番に関しては修正が必要だと思っております。

Answer 1

ざっくりこんなかんじ

<script>
function storecheck() {
  var store = document.querySelectorAll("[name=store]:checked");
  var storeul = document.querySelector("#storeul");
  var storeadded = [...storeul.querySelectorAll('li')].map(x=>x.textContent);
  store.forEach(x=>{
    const v=x.value;
    if(!storeadded.includes(v)){
      storeul.appendChild(Object.assign(document.createElement('li'),{textContent:v}));
    }
  });
  if(store.length==0) alert("項目が選択されていません");
  }
</script>
<input type="checkbox" value="test1店" name="store">test1店<br>
<input type="checkbox" value="test2店" name="store">test2店<br>
<input type="checkbox" value="test3店" name="store">test3店<br>
<input type="button" class="btn btn-primary" value="選択店舗追加" onclick="storecheck();">
<ul id="storeul"></ul>

削除ボタン

<script>
function storecheck() {
  var store = document.querySelectorAll("[name=store]:checked");
  var storeul = document.querySelector("#storeul");
  var storeadded = [...storeul.querySelectorAll('li')].map(x=>[...x.childNodes].filter(x=>x.nodeType==3)[0].textContent);
  store.forEach ( x=> {
    const v = x.value;
    if(!storeadded.includes(v)) {
      const txt = document.createTextNode(v);
      const deletebutton = Object.assign(document.createElement('button'),{type:"button",textContent:"削除",className:"del"});
      const li = [txt,deletebutton].reduce((x,y)=>(x.appendChild(y),x),document.createElement('li'));
      storeul.appendChild(li);
    }
  });
  if(store.length==0) alert("項目が選択されていません");
}
document.addEventListener('click',e=>{
  if(e.target.classList.contains('del')){
    e.target.closest('li').remove();
  }
});
</script>
<input type="checkbox" value="test1店" name="store">test1店<br>
<input type="checkbox" value="test2店" name="store">test2店<br>
<input type="checkbox" value="test3店" name="store">test3店<br>
<input type="button" class="btn btn-primary" value="選択店舗追加" onclick="storecheck();">
<ul id="storeul"></ul>

Comments

[yambejp]

逆に挿入したときにチェックボックスにdisabedを設定してしまうという考え方もありますね

[leysxxk]

ご回答誠にありがとうございます。
無事に動きを確認することが出来ました。
yambejp様のコードが私には少しレベルが高く、しっかりと理解してから今一度ご返信したいので、もう少々お待ちくださいませ。
挿入したときにチェックボックスにdisabedを設定の件ですが、考えもしなかったです、ユーザー視点でもコーディングする視点でもシンプルかつ非常に良い案だと思います。
ありがとうございます。

[leysxxk]

すみません、あれから削除ボタンの実装を行っていたのですが、ボタンを生成した際にliの中ではなく、ulの直下に生成されてしまいます。。
liの中にボタンを生成したい場合はどのように修正すればよろしいでしょうか？
function storecheck() {
var store = document.querySelectorAll("[name=store]:checked");
var storeul = document.querySelector("#storeul");
var storeadded = [...storeul.querySelectorAll('li')].map(x=>x.textContent);
store.forEach ( x=> {
const v = x.value;
if(!storeadded.includes(v)) {
var deletebutton = document.createElement('button');
deletebutton.setAttribute("type","button");
deletebutton.setAttribute("id",v);
storeul.appendChild(Object.assign(document.createElement('li'),{textContent:v}));
storeul.appendChild(deletebutton);//←このボタンをliの中に入れたいです。
deletebutton.onclick = function() {
storeul.removeChild(storeul.children[0]);
};
}
});
if(store.length==0) alert("項目が選択されていません");
}

[yambejp]

削除ボタンをつけたバージョン追記しておきました。
構造が前よりやや複雑になっています。