如何在單擊複選框時在jquery中創建數組？

Question

我有一個品牌複選框和價格複選框。現在，如果用戶點擊複選框，我想要一個brand_ids數組和一組價格。

<div class="left-filters__inner--block"> 
    <ul class="filter-data filter-data-brands" id="brands_list"> 
    @foreach(App\Brand::all() as $brand) 
     <li> 
     <label for="{{$brand->name}}" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
      <input type="checkbox" name="brands[]" id="{{$brand->name}}" class="mdl-checkbox__input" data-value="{{$brand->id}}"> 
      <span class="mdl-checkbox__label">{{$brand->name}}</span>      
     </label> 
     </li> 
    @endforeach 
    </ul> 
</div> 

與複選框

<div class="left-filters__inner--block"> 
    <ul class="filter-data filter-data-price" id="price_list"> 
     <li> 
      <label for="less-20" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
       <input type="checkbox" id="less-20" class="mdl-checkbox__input" name="price" data-value="0,20"> 
       <span class="mdl-checkbox__label">Less than 20</span> 
      </label> 
     </li> 
     <li> 
      <label for="21-50" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
       <input type="checkbox" id="21-50" class="mdl-checkbox__input" name="price" data-value="21,50"> 
       <span class="mdl-checkbox__label">21 - 50</span> 
      </label> 
     </li> 
     <li> 
       <label for="51-100" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> 
        <input type="checkbox" id="51-100" class="mdl-checkbox__input" name="price" data-value="51,100"> 
        <span class="mdl-checkbox__label">51 - 100</span> 
       </label> 
     </li> 

價格視圖現在，當用戶點擊複選框特定品牌或價格我想一個數組，看起來像這樣。

Array 
    (
     [brand_id] => Array 
     (
      [0] => 1 
      [1] => 2 
      [2] => 3 
     ) 

     [price] => Array 
     (
      [0] => 0,1000 
      [1] => 1000,2000 
     ) 

    ) 

我想實現這個使用jQuery。請協助

Answer 1

https://jsfiddle.net/2moqx8da/

$("input:checkbox").click(function() { 
    var brandids=[], prices=[]; 
    $("input[name='brands']:checked").each(function() { 
    brandids.push($(this).val()) 
    }); 
    $("input[name='price']:checked").each(function() { 
    prices.push($(this).val()) 
    }); 
    $('#output').text(JSON.stringify([brandids, prices])); 
});