单击复选框时如何在 jquery 中创建数组

How to create an array in jquery when checkbox is clicked?

本文关键字：jquery 创建数组复选框单击更新时间：2023-09-26

我有一个品牌复选框和一个价格复选框。现在，如果用户单击复选框，我想要一个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 来实现这一点。请协助

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