Создать URL с установленным флажком - PullRequest
Новая
       4

Создать URL с установленным флажком

0 голосов
/ 04 октября 2019

У меня есть форма с различными функциями 

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

Мне нужно сгенерировать ссылку с таким URL: 

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

И после, на странице ссылок пометить как отмеченныйвход в ссылку 

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

Спасибо за помощь!

ОБНОВЛЕНИЕ

Это скрипт для генерации URL-адреса по входному значению, но не 't работать с другим именем ввода 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('');
  }  
})

1 Ответ

0 голосов
/ 04 октября 2019 
    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...