ドロップダウン複数チェックボックスから複数値を取得

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} 

が、これで私は手紙で取得していますし、その1つの値のみを取得：

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