使用 url 作为查询字符串附加复选框选定的值

Question

在我的页面中，我有一些复选框。我需要通过 url 将检查的值作为查询字符串传递。 这是我的复选框代码

 <div class="panel-body">
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #1</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #2</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #3</label>
                </div>
              </div>

我的初始网址就像 www.test.com 如果我检查颜色#3，那么 url 看起来像 www.test.com/?color=color #3

如何使用 ajax 来做到这一点。???

Answer 1

试试这个。在每个复选框上将帖子更改为服务器和 html5 pushState 带有数据的 URL。

$('input[type="checkbox"]').on('change', function(e){
    var data = $('input[type="checkbox"]').serialize(),
        loc = $('<a>', {href:window.location})[0];
    $.post('/ajax-post-url/', data);
    if(history.pushState){
        history.pushState(null, null, loc.pathname+'?'+data);
    }
});

通过将索引添加到末尾来更新以使用相同命名的输入。

$('input[type="checkbox"]').on('change', function(e){
    var data = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
    if(this.checked){
        data.push(this.name+i+'='+this.value);
    }
    });
    data = data.join('&');

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

更新为以逗号分隔的列表。 key=a,b,c,d,e.

$('input[type="checkbox"]').on('change', function(e){
    var data = {},
        fdata = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
        if(this.checked){
            if(!data.hasOwnProperty(this.name)){
                data[this.name] = [];
            }
            data[this.name].push(this.value);
        }
    });
    $.each(data, function(k, v){
        fdata[k] = [v.join(',')];
    });
    fdata = fdata.join('&');

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

Answer 2

这将在更改事件中找到所有选中的复选框，然后找到关联的标签元素文本

var $checks = $('input[name="chbox"]').change(function () {
    var checked = $checks.filter(':checked').map(function () {
        return $.trim($(this).next().text());
    }).get().join(',')
    var url = 'www.test.com/?color=' + checked;
    //do you ajax
})

Answer 3

试试这个：

HTML：

<div class="panel-body">
   <div class="rowElem">
      <input type="checkbox" name="chbox" id="" value="Color #1"> <!-- add value field-->
       <label>Color #1</label>
   </div>
   <div class="rowElem">
      <input type="checkbox" name="chbox" id="" value="Color #2"> <!-- add value field-->
       <label>Color #2</label>
   </div>
   <div class="rowElem">
     <input type="checkbox" name="chbox" id="" value="Color #3"> <!--add value field-->
       <label>Color #3</label>
    </div>
</div>

jQuery:

$('input[name="chbox"]:checked').serialize();

Demo