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

时间:2012-05-29 08:54:53

标签: javascript jquery html checkbox

我想获取多个选中复选框的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

4 个答案:

答案 0 :(得分:4)

获取已检查的id

$('.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:

不要使用live,除非你的jQuery版本是&lt; 1.4.4

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

Live DEMO

答案 1 :(得分: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

答案 2 :(得分:3)

我不确定为什么每个人都要发帖来检查方框?

  

我想获取多个所选复选框的ID

为此,请使用以下代码:

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

Example fiddle

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

答案 3 :(得分:1)

试试这段代码:

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

我希望它可以帮到你