Magento Question posted in
The official documentation can be found here.

How to get multiple checkbox values in jquery – Magento

We are trying to add multiple select filters to apply button for layered navigation in Magento 2.1.0 with Smile Elastic Suite.

I have created a jQuery script to get all multiple selected option and split taking only params in array like below.

first_filter_name=325,first_filter_name=326,first_filter_name=327,second_filter_name=225,second_filter_name=228

So now how to convert this array and make single url with repeated params?
Expected url will be :http://localhost.com/page.html?first_filter_name[0]=72&first_filter_name[1]=83&first_filter_name[2]=84&second_filter_name[0]=brand1&second_filter_name[1]=brand2.

Our filters look like

My script is like :

 $(".apply-filters").on("click",function(e){
         e.preventDefault();
            var val=[];
            var queryString= [];
            var hash;
            $("input[name='type']:checked").each(function() {                    
            val.push($(this).val().slice($(this).val().indexOf('?') + 1).split('&'));

            });
           alert(val);
        });

Alert result is:

isconsumablefor=325,isconsumablefor=326,isconsumablefor=327,sets_pcs=225,sets_pcs=228

So help me to create single url to load products using filter params

Tags:

3

Answers


  1. 0

    Take a look at the snippet below. Basically the idea is to fetch all checkboxes with the appropriate selector (in my sample, [data-my-form] input[type="checkbox"]:checked, but can be anything else), and then call jQuery.serialize() on them.

    The decodeURIComponent part is just for console.log, you don’t want to decode that if you’re gonna use it as an actual URL.

    Note that inputs’ names could all be foo[] (without indexes) and that would also generate a valid URL.

    let queryString = $('[data-my-form] input[type="checkbox"]:checked').serialize();

console.log(decodeURIComponent(queryString));
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form data-my-form>
  <input type="checkbox" name="foo[0]" value="1" checked />
  <input type="checkbox" name="foo[1]" value="2" />
  <input type="checkbox" name="foo[2]" value="3" checked />
</form>
    Login or Signup to reply.
  2. 0

    You can use reduce to create the array of values and then use join to concat into a string:

    (function() {          
  var url = $('input[type="checkbox"]') // get all checkboxes
               .filter(':checked')  // get only checked
               .toArray()  // convert jQuery collection to array
               .reduce(function(acc, val) {        
                  acc.push('input[' + val.id + ']=' + val.value);
                  return acc;
               }, [])
               .join('&'); // join to string
  console.log(url);
})();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="0" type="checkbox" value="100" checked />
<input id="1" type="checkbox" value="200" />
<input id="2" type="checkbox" value="300" checked />
<input id="3" type="checkbox" value="400" checked />
<input id="4" type="checkbox" value="500" checked />
    Login or Signup to reply.
  3. 0 
    var values = 
$("input[name=cbxName]:checked")
.get()
.reduce(function(accumulator, currentValue){
     accumulator.push(currentValue.value);
     return accumulator;
},[]);

    or

    var values = 
$("input[name=cbxName]:checked")
.toArray()
.reduce(function(accumulator, currentValue){
     accumulator.push(currentValue.value);
     return accumulator;
},[]);

    result example =>
    values = ["Hourly", "Daily", "Weekly", "Monthly", "Yearly"]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search