JS/JQuery 循环复选框并按名称调用函数答案

【问题标题】：JS/JQuery loop chekboxes and call function by nameJS/JQuery 循环复选框并按名称调用函数
【发布时间】：2013-08-30 06:10:42
【问题描述】：

我有很多输入类 filter：

<ul>
<li>
<a><input class="filter" name="filter[manufacturer][]" type="checkbox"> Other (18)</a>
</li>
<li>
<a><input class="filter" name="filter[manufacturer][JOBY]" type="checkbox"> JOBY (2)</a>
</li>
<li>
<a><input class="filter" name="filter[manufacturer][Beurer]" type="checkbox"> Beurer (1)</a>
</li>
<li><a>
<input class="filter" name="filter[manufacturer][Obreey Products]" type="checkbox"> Obreey Products (1)</a>
</li>
</ul>

而且我需要使用 JavaScript 或 JQuery 和 call 循环每个输入 > cl.facetFilter(name, name2) function 如果输入 checkbox 被选中：

例如，如果复选框名称是 filter[manufacturer][JOBY] 并且输入是 checked，我需要调用：

cl.facetFilter('manufacturer', 'JOBY');

如果复选框名称filter[manufacturer][]和输入被选中，我需要调用：

cl.facetFilter('manufacturer', '');

感谢您的帮助

【问题讨论】：

标签： javascript jquery input

【解决方案1】：

你可以这样做：

$(".filter:checked").each(function() {
    var name = $(".filter").attr("name");
    name = name.split("[");

    name[1] = name[1].substring(0, name[1].length - 1);
    name[2] = name[2].substring(0, name[2].length - 1);

    cl.facetFilter(name[1], name[2]);
});

演示：http://jsfiddle.net/tymeJV/MfAsA/ -- 我记录了结果，而不是在演示中调用函数。

【讨论】：

【解决方案2】：

我建议最简单的，尽管未经测试：

$('.filter').each(function () {
    var self = this;
    if (self.checked && self.name) {
        var names = self.name.match(/\[(.+)\]/)[1].split('][');
        c1.facetFilter(names[0],names[1]);
    }
});

JS Fiddle demo.

注意，在演示中，我显然使用了不同的函数名，并且还设置了要检查的复选框（出于演示目的）。

参考资料：

【讨论】：

【解决方案3】：

这个 jQuery 应该能满足你的需要：

$('.filter:checked').each(function(index, elem) {
    elem = $(elem);
    var result = elem.attr('name').match(/\[[a-zA-Z0-9 ]*\]/g);
    if (result.length == 2) { // Sanity check
        cl.facetFilter(result[0], result[1]);
    }
});

选择器的:checked 部分应该过滤掉所有未选中的输入框，并且正则表达式匹配应该挑选出两组括号中的值。但是，如果不需要这种表示法，我建议使用更简单的格式（例如filter|manufacturer|JOBY），这样您就可以在分隔符上执行简单的 .split()。

【讨论】：

【解决方案4】：

一些棘手的字符串操作，但是当您选中相关框时，这将使用正确的参数调用函数：

$('.filter').click(function(e){
    if($(this).is(':checked')){
        $name = $(this).attr('name');
        $names = $name.split('[');
        $attr1 = $names[1].replace(']', '');
        $attr2 = $names[2].replace(']', '');
        console.log('cl.facetFilter(\''+$attr1+'\', \'' +$attr2+'\')');
    }
});

如果您在加载文档时已经选中了一些框，那么$('.filter:checked').each(function() {... 语法将带您到达那里。

JSFiddle link

【讨论】：

【解决方案5】：

$("input.filter:checked").each(function() {
    var parts = /\[(.*)\]\[(.*)\]/g.exec(this.name);
    cl.facetFilter(parts[1], parts[2]);
});

【讨论】：