CODEWITHSUNDEEP
javascript
Eric Aime Tchatchoua
Eric Aime Tchatchoua

Reputation: 191

Validation to check if at least one checkbox is selected from a jquery datatable using javascript

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

enter image description here

Upvotes: 1

Views: 2094

Answers (2)

Atik Hashmee
Atik Hashmee

Reputation: 393

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>

Upvotes: 0

user8094363
user8094363

Reputation:

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.

Upvotes: 1

Related Questions