Select / Unselect All

HTML

<form name="forms" id="frm">
<div class="category">
  
  <textarea cols="50" rows="5"class="customer_type" id="customer_type">
  </textarea>
  
<input type="text" class="customer_type" id="customer_type" size="50" maxsize="200" readonly>


  <ul class="list">
  <li><label for="select_unselect">
     <input name="0" id="select_unselect" class="select_unselect" type="checkbox" value="0">Select / Unselect
   </label></li>
   
   <li><label for="men">
     <input name="1" id="men" type="checkbox" value="Men">Men
   </label></li>    
   <li><label for="women">
     <input name="2" id="women" type="checkbox" value="Women">Women
   </label></li>    
   <li><label for="boys">
     <input name="3" id="boys" type="checkbox" value="Boys">Boys
   </label></li>    
   <li><label for="girls">
     <input name="4" id="girls" type="checkbox" value="Girls">Girls
   </label></li>    
   <li><label for="babies">
     <input name="5" id="babies" type="checkbox" value="Babies">Babies
   </label></li>
   <li><label for="women_veiled">
     <input name="6" id="women_veiled" type="checkbox" value="Women Veiled">Women Veiled
   </label></li>   
  </ul>
</div>

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

</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 listCheckBoxes(textBoxID, e){
	// get value from textarea to add items to it
  var value = $('#'+textBoxID).val();
	//var value = $('#'+textBoxID).val();
  //console.log(value);
  var isChecked = false;
  var target = $(e.target);
  //console.log('ttt '+target);
  
  var getAttr	= target.closest('input');
  //console.log(getAttr);
/* Output: 
    [input#tel, prevObject: jQuery.fn.init[1]] 
    [prevObject: jQuery.fn.init[1]]
    
    First has an input with id, and second has nothing (no id no class,.. no attribute), so get the length
    */
    
	var attrLen	= getAttr.length;
  //console.log(attrLen);
    /* Output:
    1 ==> This is for input#tel
    0 ==> and this for Object
    */
  
  if(attrLen > 0){
    	var getID	= getAttr.closest('input').attr('id');
      //console.log('idd '+getID);
      // get value using the items ID
      var getTxt	= $('#'+getID).val();
      //console.log(getTxt);
      
      // we need to check if the item is checked or not (Checked: add it to the textarea, unchecked remove it from textarea)
      
      // we need to avoid entering the value of "select_unselect all"
      if (getID != 'select_unselect'){
      var isChecked	= $('#' + getID).is(":checked");
      }
       // if true add item to textarea
       
  if(isChecked === true){
  	$('#'+textBoxID).val(value + getTxt+',');
  } else {
  
  var valSpl = value.split(',');
  //console.log(valSpl);
  
  // check if this index exists in the list
  var ind2 = valSpl.indexOf(getTxt);
	//console.log(ind2);
  
  // then remove it
	valSpl.splice(ind2, 1);
  
	//console.log('Third '+valSpl);
  
  // apply new values to search textarea
  $('#'+textBoxID).val(valSpl);

  } // end if(isChecked === true){
  
  } // end if(attrLen > 0){

} // end listCheckBoxes();


$('.customer_type').on('click', function(){
	$('.list').show();
});


$('.list').click(function(event) {

	listCheckBoxes('customer_type', event);
  
  }); // end click


// select / unselect...