Jquery 如何将复选框名称和值传递给href

我正在设置一个表单，通过自定义字段（ACF插件）过滤wordpress中的帖子。 我按组显示多项选择：

材料：木材、石头、大理石 城市：纽约、伦敦、巴黎 类型：。。。 颜色：

<form>
<div class="input-group">Material
  <label class="btn">
     <input type=checkbox name="material" value="wood">Wood
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="stone">Stone
  </label>
  <label class="btn">
     <input type=checkbox name="material" value="marble">Marble
  </label>
</div>

etc

<a href="" class="button">Go</a>
</form>

---

也许这个例子会对你有所帮助

变量材质=[]、城市=[]、类型=[]、颜色=[]；
$（文档）。在（'click'，'input[type=“checkbox”]”上，函数（index，val）{
var val=$（this.attr（“名称”）；
如果（$（this）.is（“：checked”））{
开关（val）{
案例“材料”：
material.push（$（this.val（））；
打破
案例“城市”：
city.push（$（this.val（））；
打破
案例“类型”：
键入.push（$（this.val（））；
打破
案例“颜色”：
color.push（$（this.val（））；
打破
}
}
否则{
开关（val）{
案例“材料”：
if（material.indexOf（$（this.val（））>-1）material.splice（material.indexOf（$（this.val（））），1）；
打破
案例“城市”：
if（city.indexOf（$（this.val（））>-1）city.splice（city.indexOf（$（this.val（）），1）；
打破
案例“类型”：
if（type.indexOf（$（this.val（））>-1）type.splice（type.indexOf（$（this.val（））），1）；
打破
案例“颜色”：
if（color.indexOf（$（this.val（））>-1）color.splice（color.indexOf（$（this.val（）），1）；
打破
}
}
var url=“”；
if（material.length | | city.length | | | type.length | | color.length）
url=”http://www.example.com/?“+（material.length？”material=“+material.join（）：”）+（city.length？”&city=“+city.join（）：”）+（city.length？”&type=“+type.join（）：”）+（color.length？”&color=“+color.join（）：”）；
$（'a.button'）.attr（'href'，url）；
});
材料
木材
石
大理石

您在推送值时没有检查是否有值集。请尝试

if（$（val）.attr（'data-attr-name'）==='city'&&$（val.val（））

。您可以执行

var url=”http://www.example.com/?“+”material=“+material.join（“%2C”）

等。

%2C

是html编码的逗号。@user7290573没有任何变化soops-应该是

&&$（val）.prop（“选中”）

@user7290573 idem..url=“？”+（material.length？“material=“+material.join（）：”）+（city.length？”&city=“+city.join（）：”）+（city.length？”）和type=“+type.join（）：”）+（color.length？”&color=“+color.join（）：”）$（'a.button'）.attr（'href'，url）；脚本它是好的，它的工作！我不知道为什么，但它在我的wordpress页面中不起作用。。。

This is the script
jQuery(document).ready(function($) {
    $('form').find('input[type="checkbox"]').on('click', function() {
    var material = [];
    var city = [];
    var type = [];
    var color = [];
    $('form').find('input[type="checkbox"]:checked').each(function(index, val) {
        if ($(val).attr('data-attr-name') === 'material') {
        material.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'city') {
        city.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'type') {
        type.push($(val).val());
        }
        if ($(val).attr('data-attr-name') === 'color') {
        color.push($(val).val());
        }
    });
        var url = "http://www.example.com/?" + "material=" + material.toString('') + "city=" + city.toString('') + "&type=" + type.toString('') + "&color=" + color.toString('');
        $('a.button').attr('href', url);
    });
});