jQuery复选框值为逗号分隔的列表

时间:2022-01-26 00:20:32

I have several checkboxes with a name array and I want the output of the checked boxes to be a variable with a comma separated list.

我有几个带有名称数组的复选框,我希望复选框的输出是一个带有逗号分隔列表的变量。

<input type="checkbox" name="example[]" value="288" />
<input type="checkbox" name="example[]" value="289" />
<input type="checkbox" name="example[]" value="290" />

For example if the first and last box are selected the output will be:

例如,如果选择了第一个和最后一个框,输出将是:

var output = "288,290";

How can I do this with jQuery?

如何使用jQuery实现这一点?

3 个解决方案

#1


21  

You can use :checkbox and name attribute selector (:checkbox[name=example\\[\\]]) to get the list of checkbox with name="example[]" and then you can use :checked filter to get only the selected checkbox.

您可以使用:复选框和name属性选择器(:复选框[name=example\\ \]),以获得名为“示例[]”的复选框列表,然后您可以使用:选中的过滤器只获取选中的复选框。

Then you can use .map function to create an array out of the selected checkbox.

然后可以使用.map函数从选中的复选框中创建一个数组。

DEMO

演示

var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){
      return n.value;
}).join(',');

#2


5  

Currently un-tested, but I believe the following should work:

目前尚未经过测试,但我认为以下方法应该有效:

var valuesArray = $('input:checkbox:checked').map( function () {
    return $(this).val();
}).get().join();

Edited, after a small break, to use native DOM, rather than $(this).val() (which is needlessly expensive, in context):

稍作修改后,使用本机DOM,而不是$(this).val()(在上下文中是不必要的昂贵):

var valuesArray = $('input:checkbox:checked').map( function() {
    return this.value;
}).get().join(",");

#3


3  

var valuesArray = $('input[name="valuehere"]:checked').map(function () {  
        return this.value;
        }).get().join(",");

works for me always

我总是工作

#1


21  

You can use :checkbox and name attribute selector (:checkbox[name=example\\[\\]]) to get the list of checkbox with name="example[]" and then you can use :checked filter to get only the selected checkbox.

您可以使用:复选框和name属性选择器(:复选框[name=example\\ \]),以获得名为“示例[]”的复选框列表,然后您可以使用:选中的过滤器只获取选中的复选框。

Then you can use .map function to create an array out of the selected checkbox.

然后可以使用.map函数从选中的复选框中创建一个数组。

DEMO

演示

var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){
      return n.value;
}).join(',');

#2


5  

Currently un-tested, but I believe the following should work:

目前尚未经过测试,但我认为以下方法应该有效:

var valuesArray = $('input:checkbox:checked').map( function () {
    return $(this).val();
}).get().join();

Edited, after a small break, to use native DOM, rather than $(this).val() (which is needlessly expensive, in context):

稍作修改后,使用本机DOM,而不是$(this).val()(在上下文中是不必要的昂贵):

var valuesArray = $('input:checkbox:checked').map( function() {
    return this.value;
}).get().join(",");

#3


3  

var valuesArray = $('input[name="valuehere"]:checked').map(function () {  
        return this.value;
        }).get().join(",");

works for me always

我总是工作