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

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 and Ball它会给我一个这样的数组：

{Car: true, Ball: true}

但有了这个，我会逐字逐句地得到它：

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

Answer 1

这是一个例子。 我添加了一些注释，解释了代码中的内容，但基本上您只是想根据表单上的复选框元素创建一个 JSON数组。

我还提供了使用multi-dimensional arrays的替代方法，但我强烈建议改为使用JSON路径。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;