Get multiple value from dropdown multiple checked checkbox

Question

I creating a dropdown multiple checkbox filter function for my gantt chart, but I'm having trouble getting all selected value and append it into an array. can anyone help me with this, any help is much appreciated

Below is my code :

HTML :

    <label class="text-primary" for="type_2">Search Type: </label>
    <dl id="type_2" class="dropdown">
        <dt>
            <a href="#">
              <span class="hida">ALL</span>
              <p class="multiSel"></p>
            </a>
        </dt>
        <dd>
            <div class="search_type_filter">
                <ul>
                    <li><input type="checkbox" value="ALL" selected="Selected" checked="1" />ALL</li>
                    <li><input type="checkbox" value="Car" />Car</li>
                    <li><input type="checkbox" value="Bike"/>Bike</li>
                    <li><input type="checkbox" value="Ball"/>Ball</li>
                </ul>
            </div>
        </dd>
    </dl>

Javascript :

$('.search_type_filter input[type="checkbox"]').on('click', function() {
      var title = $(this).closest('.search_type_filter').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";
      var values = $(this).closest('.search_type_filter').find('input[type="checkbox"]').val(),
        values = $(this).val();
    search_type_value = {};// put combo value into scope variable
    for(var i = 0; i < values.length; i++){
        search_type_value[values[i]] = true;// build hash for easy check later
    }
    console.log(search_type_value);
    gantt.render();// and repaint gantt

      if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $('.multiSel').append(html);
        $(".hida").hide();
      } else {
        $('span[title="' + title + '"]').remove();
        var ret = $(".hida");
        $('.dropdown dt a').append(ret);
      }
});
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
    if(search_type_value['ALL'])
        return true;
    return !!search_type_value[task.search_type];
});

So the end result what I want is let say I check Car and Ball it will give me an array like this :

{Car: true, Ball: true}

but with this I'm getting by letter and its getting only one value :

{C: true, a: true, r: true}

Answer 1

Here is an example. I added comments that explain whats going on in the code but essentially you just want to create a JSON array based on the checkbox elements on your form.

I also included an alternative to this that uses multi-dimensional arrays but I highly recommend you go down the JSON path instead.

//on button click
$("#click").click(function() 
{
  //create variable to hold the array
  var yourArray = [];
  
  //for each checkbox within the group
  $("input[name='group']").each(function()
  {
    //return if its checked or not
    var isChecked = $(this).is(":checked");
    //get the value of the checkbox i.e. Bike etc.
    var value = $(this).val();
    
    //Create a new object using above variables
    var myObject = new Object();
    myObject.value = value;
    myObject.isChecked = isChecked;

    //push the object onto the array
    yourArray.push(myObject);
  });

  //Now you have a dynamic object you can use to select what you need
  console.log("Using JSON Array (recommended)");
  console.log(yourArray[0].value);
  console.log(yourArray[0].isChecked);
  console.log(yourArray[1].value);
  console.log(yourArray[2].value);
  
  //showing everything in the array
  console.log(yourArray);
  
  //if you really need to have the output as Ball:true, Bike:false etc you can break up the array you already have like this:
  //Create 2d array
  var multiArray = [];
  
  //foreach index in your json array
  $.each(yourArray, function(key, value)
  {
    //create a new array
    var newArray = [];
    
    //push the values into it
    newArray.push(value.value);
    newArray.push(value.isChecked);
    
    //push the array onto the 2d array
    multiArray.push(newArray);
  });
  
  //output the results
  console.log("Using 2D Array");
  console.log(multiArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="text-primary" for="type_2">Search Type: </label>
<dl id="type_2" class="dropdown">
  <dt>
    <a href="#">
        <span class="hida">ALL</span>
        <p class="multiSel"></p>
      </a>
  </dt>
  <dd>
    <div class="search_type_filter">
      <ul>
        <li><input type="checkbox" name="group" value="ALL" selected="Selected" checked="1" />ALL</li>
        <li><input type="checkbox" name="group" value="Car" />Car</li>
        <li><input type="checkbox" name="group" value="Bike" />Bike</li>
        <li><input type="checkbox" name="group" value="Ball" />Ball</li>
      </ul>
    </div>
  </dd>
</dl>

<button type="button" id="click"> check </button>