【jQuery】モーダルにチェックボックスの選択内容をかいたり、未選択状態を出したい

Question

実現したいこと

jQueryについて初質問です

・チェックが一つもされてなくてボタン(押す)を押したら、
チェックを入れてください　という文言をモーダルで出したい

・チェックがひとつでもされてて、ボタン(押す)を押したら、
Ａ,
Ｂ,
Ｃ
[submitボタン]

選んだチェックの内容とそれを送信するボタン付きのモーダルで出したい

ご教授いただけると幸いです

＜追記の問題点＞
選択中のとき、あ　以外の選択肢が表示されない（推測できる原因：.eachをどこに入れるかわからない）

<!--  ボタン -->
<div class="btn">
         <button type="button" id="btn" class="btn01" name="check-btn">押す</button>
     </div>

<!--  チェックボックス -->
<ul>
<li>
<span>   
<input type="checkbox" class="cb01" id="pl01" name="select" value="あ">
        <label for="pl01" class="select">a</label></span>
</li>

<li>
<span>   
<input type="checkbox" class="cb01" id="pl02" name="select" value="い">
        <label for="pl02" class="select"></label></span>
</li>

<li>
<span>  
 <input type="checkbox" class="cb01" id="pl03" name="select" value="う">
        <label for="pl03" class="select"></label></span>
</li>

</ul>

<!--  モーダル -->

        <div class="modal-container">
            <div class="modal-body">
                <span class="modal-close">
                <!-- close btn -->
                </span>
                <div class="modal-content">
                     <div class="cb" id="cb">
                    </div>
                    
                    
                </div>
            </div>
        </div>



    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
<script>

var close = $('.modal-close');    
var container = $('.modal-container');
var cbname = [];
var cbtxt = $('[name="select"]').val();



$("#btn").click(function () {
    container.addClass('active');   
    
    close.on('click', function () {
        container.removeClass('active');
}); 
 
     container.on('click', function () {
        container.removeClass('active');
}); 
    
});

<!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊多分問題点ここ＊＊＊＊＊＊＊＊＊＊＊＊＊ -->

  $("#btn").click(function () {
    if ($('[name="select"]').prop("checked")) {
      $("#cb").text(cbtxt);
    } else {
      $("#cb").text("選択してください");
    }
  });
  

          
    </script>
   

/* css */
 span.modal-close {
     position: absolute;
     transform: translate(50%, -50%);
     top: 0;
     right: 0;
     cursor: pointer;}
 span.modal-close:before{
    content: "×";
    color:#000;
    background:#fff;
    width: 30px;
     height: 30px;
     display: block;
}
.modal-container {
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 999999;
}

.modal-container.active {
  opacity: 1;
  visibility: visible;
}

.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 700px;
  width: 90%;
  top:30%;
  left: 0;
}

.modal-content {
  background: #fff;
  text-align: left;
  padding: 30px;
  overflow: auto;
  max-height: 700px;
}

Answer 1

jQueryが前提であればサポート終了してますがuiを利用するのが早いです

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function(){
  $('#cb').hide();
  $('#btn').on('click',function(){
    if($('.cb01:checked').length==0){
      $('#cb').dialog({
      modal:true,
      buttons:{
        "ok":function(){
          $(this).dialog("close");
        },
      }
      });
    }
  });
});
</script>
<div class="btn">
<button type="button" id="btn" class="btn01" name="check-btn">押す</button>
</div>
<ul>
<li>
<span>   
<input type="checkbox" class="cb01" id="pl01" name="select" value="あ">
<label for="pl01" class="select">a</label></span>
</li>
<li>
<span>   
<input type="checkbox" class="cb01" id="pl02" name="select" value="い">
<label for="pl02" class="select">b</label></span>
</li>
<li>
<span>  
 <input type="checkbox" class="cb01" id="pl03" name="select" value="う">
<label for="pl03" class="select">c</label></span>
</li>
</ul>
<div class="modal-container">
<div class="modal-body">
<span class="modal-close">
<!-- close btn -->
</span>
<div class="modal-content">
<div class="cb" id="cb">
選択してください
</div>
</div>
</div>
</div>

素のjsでやるならdialogタグをつかってください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    if(!document.querySelector('.cb01:checked')){
      cb.showModal();
    }
  });
  document.querySelector('#cb .ok').addEventListener('click',({target})=>{
    cb.close();
  });
});
</script>
<dialog class="cb" id="cb">
選択してください
<hr>
<input type="button" value="OK" class="ok">
</dialog>

<div class="btn">
<button type="button" id="btn" class="btn01" name="check-btn">押す</button>
</div>
<ul>
<li>
<span>   
<input type="checkbox" class="cb01" id="pl01" name="select" value="あ">
<label for="pl01" class="select">a</label></span>
</li>
<li>
<span>   
<input type="checkbox" class="cb01" id="pl02" name="select" value="い">
<label for="pl02" class="select">b</label></span>
</li>
<li>
<span>  
 <input type="checkbox" class="cb01" id="pl03" name="select" value="う">
<label for="pl03" class="select">c</label></span>
</li>
</ul>

Answer 2

こうですか？

$("#btn").click(function () {
    if ($('[name="select"]:checked').length) {
        $("#cb").text($.map($('[name="select"]:checked'), el => $(el).val()));

---

参考：

Get the current value of the first element in the set of matched elements.
.val() | jQuery API Documentation