Reputation: 1166
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}
Upvotes: 0
Views: 837
Reputation: 4422
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>
Upvotes: 3