從下拉列表中獲取多個值複選框複選框

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>