Select / Unselect then insert

by aburayane

HTML

<form name="forms" id="frm">
<div class="category">
  
  <textarea cols="50" rows="2" class="customer_type" id="customer_type_txt"></textarea>



  <ul class="list">
  <li><label for="select_unselect" class="sel">
     <input name="0" id="select_unselect" class="select_unselect" type="checkbox" caption='select' value="0">Select / Unselect
   </label></li>
   
   <li><label for="1" id="11" class="sel">
     <input name="customer[]" id="1" type="checkbox" caption='Men' value="Men">Men
   </label></li>    
   <li><label for="2" class="sel">
     <input name="customer[]" id="2" type="checkbox" caption='Women' value="Women">Women
   </label></li>    
   <li><label for="3" class="sel">
     <input name="customer[]" id="3" type="checkbox" caption='Boys' value="Boys">Boys
   </label></li>    
   <li><label for="4" class="sel">
     <input name="customer[]" id="4" type="checkbox" caption='Girls' value="Girls">Girls
   </label></li>    
   <li><label for="5" class="sel">
     <input name="customer[]" id="5" type="checkbox" caption='Babies' value="Babies">Babies
   </label></li>
   <li><label for="6" class="sel">
     <input name="customer[]" id="6" type="checkbox" caption='Women Veiled' value="Women Veiled">Women Veiled
   </label></li>   
  </ul>
</div>

<div class="items"></div>

</form>

<form>
<input type="checkbox" name="ss" class="cs" id="ds">

</form>

CSS

.search {
  text-transform: capitalize; // first letter in uppercase
  
}

.list {
  cursor: pointer;
  //display: none;
  list-style-type: none;
}

a {
  text-decoration: none;
}

JavaScript

function selectItems(formID, className, event){
	    var findInpts = []; // get all inputs in a form
	    var isChecked = false; // by default false
	    var storeCaps=[]; // store captions
	    var storeIDs=[]; // store IDs
	    var storeVals=[]; // store values
	    var numChecked = 0; // how many items checked

	    var target = event.target;
        console.log(target);
        
        var targetID   = target.id;
        console.log(targetID);
        
        // find all inputs in form starting from 0
        /*
        [input#1, input#2, input#3, input#4, input#5, input#6, prevObject: n.fn.init[1], context: document, selector: "#frm :checkbox:gt(0)"]
        */
        findInpts = $('#'+formID+' :checkbox:gt(0)');
        console.log(findInpts);
        
        // count how many inputs
        var countInputs = findInpts.length;
        console.log(countInputs);
        
        
        /* loop thrugh inputs to check
        // 1- If the checked box is select_unselect
            => we need to check if it is checked or not
            ===> if yes: we need to check all checkboxes
            ===> if no: we need to uncheck all checkboxes
        // 2- If the checked box is NOT select_unselect
            => we need to check that specific checkbox
        // 3- in each case, we need to get all checked boxes information that are checked,
        such as ids, captions and values,
            then store them in 3 arrays
        */
        
        $.each(findInpts, function(ind, val){
            console.log(val);
            
  	        var getID    = val.id;
  	        
  	            // if checked box is select_unselect        
      	        if(targetID == 'select_unselect'){
  	            
  	            // we need to turn the isChecked to true
  	            isChecked = $('#select_unselect').is(':checked');
  	            
  	            // if it is true
  	            if(isChecked === true){
  	                // loop and check all check boxes
  	     ...