从下拉列表中获取多个值复选框复选框

Question

我为我的甘特图创建了一个下拉多选框过滤功能，但我无法获取所有选定的值并将其追加到数组中。谁能帮我这个，任何的帮助深表感谢

下面是我的代码：

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]; 
}); 

所以最后的结果我想要什么是让我说我​​检查汽车和球它会给我这样的阵列：

{Car: true, Ball: true} 

但这个我通过信件获取和其只得到一个值：

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

Answer 1

下面是一个例子。 我添加了解释代码中发生了什么的注释，但基本上，您只是想根据表单上的复选框元素创建JSON数组。

我还包括一个替代方案，使用multi-dimensional arrays，但我强烈建议而不是沿着JSON路径。

//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>