如何获取多个选中的复选框答案

【问题标题】：how to get the the multiple selected check boxes如何获取多个选中的复选框
【发布时间】：2012-05-29 08:54:52
【问题描述】：

我想获取多个选中复选框的id

HTML：

<input type="checkbox" class="a" id="1">1
<input type="checkbox" class="a" id="2">2
<input type="checkbox" class="a" id="3">3
<input type="checkbox" class="a" id="4">4
<input type="checkbox" class="a" id="5">5

<input type="button" value="Button" id="button">

JS：

$("#button").live('click',function(){
    var a = document.getElementsByClassName("a");
    alert(a);
    alert(a.checked);
});

JS Fiddle

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

要获得被检查者的ids：

$('.a').filter(function(){
    return this.checked // Takes only checked checkboxes.
}).map(function(){
    return this.id // Makes an array which its elements are the ids.
}).get(); // Returns the array.

Live DEMO

请注意，根据 w3c 规范，以数字开头的 id 无效！

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

查看checkboxes:

除非你的 jQuery 版本是，否则不要使用live

$("#containerId").on('click','#button', function(){
  $('.a').prop('checked', true);
});

Live DEMO

【讨论】：

【解决方案2】：

我不知道为什么每个人都发布代码来选中这些框？

我想获取多个选中的复选框的id

为此，请使用以下代码：

$("#button").click(function() {
    var selected = $(".a:checked").map(function() {
        return this.id;
    }).get();
    alert(selected.join(","));
});

Example fiddle

您也不应该使用live()。 delegate() 或 on() 是更好的解决方案，但只有在页面加载后将 #button 元素添加到页面时才需要它们。

【讨论】：

我阅读了问题，然后阅读了第一个答案，当我在其中看到 live 时，我想我被它蒙蔽了...... :)

【解决方案3】：

$("body").on("click", "#button", function(){
    var ids = $(':checkbox.a')
        .filter(':checked')
        .map(function() {
            return this.id;
        });
    console.log(ids); // an array of ids
});

DEMO

或者

$("body").on("click", "#button", function(){
    var ids = $(':checkbox:checked.a')
        .map(function() {
            return this.id;
        }).toArray();
    console.log(ids); // an array of ids
});

DEMO

或者

$("body").on("click", "#button", function(){
    var ids = $(':checkbox.a')
        .map(function() {
            if( this.checked )
                return this.id;
        }).toArray();
    console.log(ids); // an array of ids
});

DEMO

【讨论】：

这里最后的东西怎么返回id？

【解决方案4】：

试试这个代码：

$("#button").live('click',function(){
    $("input:checkbox").each(function()
    {
        if($(this).is(':checked')){
            alert( $(this).attr('id') )
        }
    });
});

希望对你有帮助

【讨论】：

请$(this).is(':checked') => this.checked.