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

Question

I have a checkbox for brands and a check box for prices. Now if a user clicks on the check box I want an array of brand_ids and an array of prices.

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

price view with checkbox

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

Now when user clicks on the checkbox a particular brand or price I want an array which looks like this.

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

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

    )

I want to achieve this using jquery. Please assists

checkboxes can fire onclick events, just add onclick="myfunction()" and then do what you need to do in that function. — Cârnăciov
– Cârnăciov, Commented Feb 26, 2016 at 14:30

jnoreiga · Accepted Answer · 2016-02-26 14:39:40Z

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

answered Feb 26, 2016 at 14:39

jnoreiga

2,18419 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related