时间戳

首页 > 解决方案 > 生成带有选中复选框的 url

jquery - 生成带有选中复选框的 url

问题描述

我有一个具有不同功能的表格

<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 的脚本，但不适用于不同的输入名称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('');
  }  
})

标签： jquery

解决方案

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

推荐阅读