如何将复选框中的选中值作为 javascript 数组/字符串收集？

How to collect checked values in checkboxes as a javascript array/string?

提问by anita.kcx

I want to know how to search the inputs provided by the user in the form of checkboxes in a mysql database. But before that I need to get the checked fields into a javascript array/string so that I can pass it to PHP with the url.

我想知道如何在 mysql 数据库中以复选框的形式搜索用户提供的输入。但在此之前，我需要将选中的字段放入 javascript 数组/字符串中，以便我可以将其通过 url 传递给 PHP。

<form>
    <input type="checkbox" id="interests" name="interests" value="Food">`
    <input type="checkbox" id="interests" name="interests" value="Movies">`
    <input type="checkbox" id="interests" name="interests" value="Music">`
    <input type="checkbox" id="interests" name="interests" value="Sports">`
</form>

I am able to the above for other form elements such as text and select input but not sure how to do it for checkboxes. Please help. Thanks

我可以对其他表单元素（例如文本和选择输入）执行上述操作，但不确定如何为复选框执行此操作。请帮忙。谢谢

回答by Andy

Rather than

而不是

<form> 
<input type="checkbox" id="interests" name="interests[]" value="Food"> 
<input type="checkbox" id="interests1" name="interests[]" value="Movies"> 
<input type="checkbox" id="interests2" name="interests[]" value="Music"> 
<input type="checkbox" id="interests3" name="interests[]" value="Sports">

Change the name attribute from intereststo interests[]Should solve your problem. If I am wrong about the attribute I am sorry, a little out of practice with PHP, but I am pretty sure. No need to do anything with javascript. Its much easier this way. Of course, if you don't want easy...

将 name 属性从 更改interests为interests[]应该可以解决您的问题。如果我对属性有误，我很抱歉，对 PHP 有点不习惯，但我很确定。无需对 javascript 执行任何操作。这样就容易多了。当然，如果你不想简单...

In terms of your first question about searching it through the database, I don't understand why you would need to?? If its a checkbox you know exactly what it should be, so just make it that and insert it into your database like so:

关于您通过数据库搜索它的第一个问题，我不明白您为什么需要？如果它是一个复选框，您确切地知道它应该是什么，因此只需将其设置为并将其插入到您的数据库中，如下所示：

INSERT INTO your_table values(user_id_i_guess, interests...);

You get the point right?

你说得对吗？

回答by thecodeparadox

Problems in your code

您的代码中的问题

• don't use same idto multiple elements

• change checkboxs' name to interests[]

• 不要id对多个元素使用相同的

• 将复选框的名称更改为 interests[]

jQuery

jQuery

var vals = [];

$(':checkbox:checked[name^=interests]').val(function() {
   vals.push(this.value);
});

If you want to convert array to as comma separated string then try

如果要将数组转换为逗号分隔的字符串，请尝试

val.join(',');

Note

笔记

$(':checkbox:checked[name^=interests]')selector select all checked checkbox with namestart with interests.

$(':checkbox:checked[name^=interests]')选择器选择所有以name开头的复选框interests。

回答by Florian Margaine

Assuming that your form has a name,

假设你的表单有一个名字，

var c = [],
    els = document.forms.formName.elements,
    len = els.length;

for ( var i = 0; i < length; i++ ) {

    if ( els[ i ].type === 'checkbox' ) {

        // If you want to add only checked checkboxes, you can use:
        if ( els[ i ].checked ) c.push( els[ i ].value );

        // If you don't care, just use:
        c.push( els[ i ].value );
    }
}

console.log( c ); // Array of the checkboxes values

If you don't care about legacy browsers, you can use mapto have cleaner code:

如果你不关心旧浏览器，你可以使用map更干净的代码：

var c = [].map.call( document.forms.formName.elements, function( el ) {
    if ( el.type === 'checkbox' ) {
        if ( el.checked ) return el.value;
    }
} );

If you have jQuery, here is some codez:

如果你有 jQuery，这里有一些代码：

var c = $( ':checkbox:checked' ).map( function() {
    return $( this ).val();
} );

console.log( c ); // Array of the checkboxes values

// To be more precise (so, more performant), you can use the following selector:
$( ':checkbox:checked', document.forms.formName.elements )

回答by yAnTar

1. You must use different id for checkboxes (id for element must be unique)
2. Make name for checkboxes interests[] and submit form - on server you can use array $_POST['interests'] or $_GET['interests']

1. 您必须为复选框使用不同的 id（元素的 id 必须是唯一的）
2. 为复选框的兴趣 [] 命名并提交表单 - 在服务器上，您可以使用数组 $_POST['interests'] 或 $_GET['interests']