Generate url with checked checkbox

Question

I have a form with different features

<form name="filter" action= method="get">
<input type=checkbox name="color" value="red">Red<br>
<input type=checkbox name="color" value="blue">Blue<br>
<input type=checkbox name="color" value="white">White<br>

<input type=checkbox name="size" value="small">Small<br>
<input type=checkbox name="size" value="medium">Medium<br>
<input type=checkbox name="size" value="large">Large<br>

...
</form>

I need to generate a link with url like this:

if red is checked > http://example.com/products?color=red
if red and blue are checked > http://example.com/products?color=red,blue
if red blue and small are checked > http://example.com/products?color=red,blue&size=small

And after, in the link page, mark as checked the input in link

in http://example.com/products?color=red > red input is checked

Thanks for help!

UPDATE

This is a script to generate url by input value, but doesn't work with different input name JSFIDDLE

<span class="link"></span>

$("input[type=checkbox]").on("change", function(){
    var arr = []
    $(":checkbox").each(function(){
       if($(this).is(":checked")){
         arr.push($(this).val())
       }
    })
    var vals = arr.join(",")
  var name = $(this).attr('name')
    var str = "http://example.com/products?" + name + "=" + vals
    console.log(str);

  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }  
})

A) inputs can't have multiple value attributes and B) all your inputs are missing the name attribute — j08691, Oct 04 '19 at 14:25
Voted to close because of small typographical problem since you named your `name` attribute `value` as well. — Mark Baijens, Oct 04 '19 at 14:27
You should check out this question,it might help: https://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url — porsekin, Oct 04 '19 at 14:28
Alright, so do you have any logic written already that is trying to solve this? If so, please provide what you have tried. Also, where are you needing to use this url? I see these fields are in a form, which is using the GET method, so there's possibly a concern there with the need for this logic. — Taplar, Oct 04 '19 at 14:44
It's a form to filter post in wordpress by custom field type (https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/). I update the question with a part of working script — gigin, Oct 04 '19 at 15:01

score 0 · Accepted Answer · answered Oct 04 '19 at 15:38

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script>
    <script type="text/javascript">
    $(function() {
    $('form').find('input[type="checkbox"]').on('click', function() {
    var color = [];
    var size = [];
    var url = "";
    $('form').find('input[type="checkbox"]:checked').each(function(index, val) {
    if ($(val).attr('data-attr-name') === 'color') {
    color.push($(val).val());
    } else {
    size.push($(val).val());
            }
        });
        var url = $('#hdnBaseURL').val() + "color=" + color.toString('') + "&size=" + size.toString('');
        $('#hdnURL').val(url);
    });

    var queryString = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    var checked = [];
    $.map(queryString, function(val) {
        if (val.indexOf("color=") >= 0) {
            checked.push(val.split('=')[1]);
        }
        if (val.indexOf("size=") >= 0) {
            checked.push(val.split('=')[1]);
        }
    });

    $.each(checked, function(index, val) {
        $('input[type="checkbox"][value=' + val + ']').prop('checked', true);
    });
    });
   </script>
    </head>
    <body>
    <form name="filter" action= method="get">
        <input type=checkbox data-attr-name="color" value="red">Red<br>
        <input type=checkbox data-attr-name="color" value="blue">Blue<br>
        <input type=checkbox data-attr-name="color" value="white">White<br>

       <input type=checkbox data-attr-name="size" value="small">Small<br>
       <input type=checkbox data-attr-name="size" value="medium">Medium<br>
       <input type=checkbox data-attr-name="size" value="large">Large<br>

    <input type="hidden" id="hdnBaseURL" name="hdnBaseURL" value="http://example.com/products?" />
    <input type="hidden" id="hdnURL" name="hdnURL" />
    </form>
    </body>
    </html>

Generate url with checked checkbox

1 Answers1