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}

Master Yoda · Accepted Answer · 2017-10-20 10:19:39Z

3

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>

edited Oct 20, 2017 at 10:19

answered Oct 19, 2017 at 11:28

Master Yoda

4,42212 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

M.Izzat Over a year ago

Hey Yoda, thanks so much for your help, this looks great. unfortunately I'm far away from my pc right now, I'll get back with you by tomorrow. thank you so much

M.Izzat Over a year ago

but it advance can I ask you how can create the JSON to looks exactly to this format {Car: true, Ball: true}, my apologies i'm very new to programming

Master Yoda Over a year ago

@M.Izzat Take a look at my updated answer. Should solve your problem.

Master Yoda Over a year ago

@M.Izzat I also added an alternative approach using 2d arrays but i would recommend you go down the JSON route.

Collectives™ on Stack Overflow

Get multiple value from dropdown multiple checked checkbox

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related