Question

我希望获取复选框的所有值，并提醒在表单提交时检查它们

这是我到目前为止所尝试的内容：

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脚本

      $("#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();
    });

此处位于JSFIDDLE

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

Answer 1

使用$('input[type="checkbox"]:checked')，请注意input[type="checkbox"]与伪类:checked之间的空格已删除：

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();
 });

Answer 2

不要将后代选择器input[type="checkbox"]:checked用于输入和：选中的选择器 - 它们之间没有空格

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

但更容易使用.map()

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

Answer 3

此处不应有任何空格[type="checkbox"]:checked。

更改

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

到

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

Updated fiddle here.

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

3 个答案: