驗證以檢查是否使用 javascript 從 jquery 數據表中選擇了至少一個復選框

Question

任何人都可以幫助我使用下面的 javascript 代碼，我正在嘗試為用戶編寫驗證，以便至少在 checkbox 上進行選擇。 當我沒有選擇復選框時驗證有效，但是當我選擇一個復選框時，我仍然有警報消息

HTML代碼

    <div id="ichildticket" class="panel panel-primary" style="display:none">
        <div class="panel-heading" >    
         <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" href="#collapseFive1" aria-expanded="false">
             <i class="fa fa-child fa-fw"></i> Select Child Tickets to Close <i class="pull-right fa fa-caret-down" aria-hidden="true"></i>
              </a>
         </h4>
     </div>
   <div id="collapseFive1" class="panel-collapse collapse in" role="tabpanel">
     <div class="panel-body">
       <span id="SelectTicket" style="color:red"></span>
          <div class="col-md-12">
          <table id="childtable" class="table table-condensed table-striped" style="width: 100% !important;"></table>
         </div>
    </div>
       </div>
   </div>
   <div class="form-group">
       <div class="col-md-12">
        <input type="submit" value="Save" class="btn btn-primary btn-block " id="btnSubmit" />
      </div>
  </div>

Javascript

        $(function () {
        $('input[id$=btnSubmit]').click(function (ze) {
            $('#childtable').find("tbody tr").each(function () {
               var row = $(this);
                var vcheckBox = document.getElementById("childticket");
                var checkboxs = row.find($(':checkbox:checked'));
                var okay = false;
                for (var i = 0, l = checkboxs.length; i < l; i++) {
                    if (vcheckBox.checked == true && checkboxs[i].checked) {
                        okay = true;
                        break;
                    }
                }
                if (!okay) {
                    alert("At least One Child Ticket Should Be Selected");                        
                    ze.preventDefault();
                }
                else {
                    alert("Checkbox Selected");
                }
            });
        });
    });

Jquery 表格圖片

Answer 1

您可以從父表中找到所有復選框，並找出其中有多少被選中。 如果您有多個 0，那么至少有一個復選框被選中，否則用戶沒有選擇任何內容。 像這樣的東西：

var check = $('#tablename').find('input[type=checkbox]:checked').length;
if (check>0) {
    alert("Checkbox Selected");
else{
    alert("At least One Child Ticket Should Be Selected");                        
    ze.preventDefault();
}

stackoverflow 上已經有一個類似的問題： How to count many checkboxes has been checked 。

Answer 2

如果你喜歡在你的項目中使用純 Javascript。 這可能對你有幫助，我猜是 Javascript 代碼

 let obj =  document.getElementById("clickevent");
let btn = document.getElementById("btnhit");
let holdvalue = [];
obj.addEventListener("click",function(even){
        holdvalue.push(even.target.value);

});
btn.addEventListener("click",function(even){
    if(holdvalue.length  !== 0)
    {
        holdvalue.forEach(function(item){
     alert(item);
      });
    }
    else

    alert("you have not selected any item yet");

});

HTML代碼

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
        <form>

           <div class="form-group" id="clickevent">
               <input type="checkbox" class="myche" value="1">
               <input type="checkbox" class="myche" value="2">
               <input type="checkbox" class="myche" value="3">
               <input type="checkbox" class="myche" value="4">
               <input type="checkbox" class="myche" value="5">
               <input type="checkbox" class="myche" value="6">
           </div>
           <button class="btn btn-outline-primary" type="button" id="btnhit">
            Hit the button
           </button>
        </form>
    </div>

  </div>

</div>