Question

我有一些复选框来获取品牌名称和尺寸，我想在网址框中显示所选复选框的值，如

www.xyz.com?brands=P,Q,R&Size=2,3

我已经显示了这段代码，

 www.xyz.com?brands=P&brands=Q&brands=R&Size=2&Size=3

的JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function(e) {
    var data = [],
        loc = $('<a>', {
            href: window.location
        })[0];
    $('input[type="checkbox"]').each(function() {
        if (this.checked) {
            data.push(this.name + '=' + this.value);
        }
    });
    data = data.join('&');

    $.post('/ajax-post-url/', data);
    if (history.pushState) {
        history.pushState(null, null, loc.pathname + '?' + data);
    }
});
</script>

HTML

<div class="pane">
    <div class="ele">
        <input type="checkbox" value="X" name="Brand">
        <label>Brand 1</label>
        <input type="checkbox" value="Y" name="Brand">
        <label>Brand 2</label>
        <input type="checkbox" value="Z" name="Brand">
        <label>Brand 3</label>
        <input type="checkbox" value="1" name="Size">
        <label>Size 1</label>
        <input type="checkbox" value="2" name="Size">
        <label>Size 2</label>
        <input type="checkbox" value="3" name="Size">
        <label>Size 3</label>
    </div>
</div>

Answer 1

您可以这样更改脚本：

$('input[type="checkbox"]').on('change', function(e) {
    var data = {}; // 1
    var dataStrings = []; // 2

    $('input[type="checkbox"]').each(function() { // 3
        if (this.checked) { 
            if (data[this.name] === undefined) data[this.name] = []; // 4
            data[this.name].push(this.value); // 5
        }
    });

    $.each(data, function(key, value) // 6
    {
        dataStrings.push(key + "=" + value.join(','));
    });

    var result = dataStrings.join('&'); // 7

    alert(result);

    $.post('/ajax-post-url/', data);
    if (history.pushState) {
        history.pushState(null, null, loc.pathname + '?' + data);
    }
});

这是一个JSFiddle：http://jsfiddle.net/8ct2mbpa/

这是它的工作原理：

data是一个由选定值的ARRAYS组成的对象
dataStrings是一个由键值对
首先，我们遍历所有选中的复选框
如果尚未提供此类数组，我们会创建它。例如，data['Brand']现在是一个空数组
我们添加一个选定的值。 data['Brand']现在填充了值['X'，'Y'，'Z']
合并键值对中的值。它现在变为Brand=X,Y,Z
使用“＆amp;”加入所有键值对登录

Answer 2

我认为你正在寻找这个：

How do I pass a URL with multiple parameters into a URL?

那就是说，我认为这个问题可以标记为双重。

从所选复选框中获取输入值并将其显示在URL框中

2 个答案: