验证以检查是否使用 javascript 从 jquery 数据表中选择了至少一个复选框

Question

Can anyone help with my javascript code below I am trying to write a validation for the user to select at least on checkbox . the validation works when I don't select a checkbox but when I do select one I still have the alert message

HTML Code

    <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 table image

Answer 1

You can find all the checkboxs from the table parent and figure out how many of them are checked. If you have more than 0, so there is at least one checkbox checked else the user did not select anything. Something like this:

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();
}

A similar question was already on stackoverflow: How to count how many checkboxes has been checked .

Answer 2

If you love pure Javascript to have all over your project. this might help you I guess Javascript code

 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 code

<!-- 
  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>