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，那么网址将看起来像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

试试这个：

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

Answer 3

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

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

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

3 个答案: