在表单提交的数组中获取复选框值

I want to get all the values of checkboxes and alert them that are checked on form submit,

我想获取复选框的所有值并提醒它们在提交表单时被选中，

Here is what I have tried so far:

以下是我迄今为止所做的尝试:

HTML

HTML

<form id="calform">
<input type="checkbox" value="one_name" />
<input type="checkbox" value="one_name1"/>
<input type="checkbox" value="one_name2"/>
<input type="submit" value="Submit" />
</form>

jQuery Script

jQuery脚本

      $("#calform").submit(function(e){

    // array that will store all the values for checked ones
    var allVals = [];

    $('input[type="checkbox"] :checked').each(function() {

    // looping through each checkbox and storing values in array for checked ones.
    allVals.push($(this).val());

    });

    alert(allVals);

    e.preventDefault();
    });

Here it is on JSFIDDLE

在JSFIDDLE

Alert box shows up empty on form submit.

在提交表单时，警告框显示为空。

3 个解决方案

#1

Use $('input[type="checkbox"]:checked'), note the space was removed between input[type="checkbox"] and the pseudo class :checked:

使用$('input[type="checkbox"]: ")，注意在input[type="checkbox"]和pseudo类之间的空格被删除:勾选:

UPDATED EXAMPLE HERE

更新的例子

 $("#calform").submit(function (e) {

     var allVals = [];

     $('input[type="checkbox"]:checked').each(function () {
      //     removed the space ^

         allVals.push($(this).val());
     });
     alert(allVals);

     e.preventDefault();
 });

#2

don't use descendant selector input[type="checkbox"]:checked for input and :checked selectors - no space between them

不要使用后代选择器输入[type="checkbox"]:勾选输入和:勾选选择器-它们之间没有空格

var allVals = [];
$('input[type="checkbox"]:checked').each(function () {
    // looping through each checkbox and storing values in array for checked ones.
    allVals.push($(this).val());
});

but it will easier to use .map()

但是它更容易使用。map()

var allVals = $('input[type="checkbox"]:checked').map(function () {
    return this.value
}).get();

#3

There should not be any space here [type="checkbox"]:checked.

这里应该没有空格[type="checkbox"]:勾选。

Change

改变

$('input[type="checkbox"] :checked').each(function() {

来

$('input[type="checkbox"]:checked').each(function() {

Updated fiddle here.

更新的小提琴。

#1