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

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

 
  Color #1 
 
  Color #2 
 
  Color #3 
  

我的初始url是www.test.com，如果我检查颜色＃3，那么url将看起来像www.test.com/?color=color＃3

如何使用ajax完成此操作。???

Answer 1

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

 $('input[type="checkbox"]').on('change', function(e){ var data = $('input[type="checkbox"]').serialize(), loc = $('', {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 = $('', {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 = $('', {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

这将在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 }) 

Answer 3

试试这个：

HTML：

 
 
   Color #1 
 
   Color #2 
 
   Color #3 
  

jQuery的：

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

演示