I want to get the id of the multiple selected check boxes

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

I want to get the id of the multiple selected check boxes

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

4 Answers 4

To get the ids of the checked:

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

Note that id that begins with a number isn't valid according to the w3c spec!

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

To check the checkboxes:

Don't use live unless your jQuery version is < 1.4.4

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

Live DEMO

I'm not sure why everyone is posting code to check the boxes?

I want to get the id of the multiple selected check boxes

To do that, use this code:

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

Example fiddle

You should also not use live(). delegate() or on() are the better solutions, but they are only required should the #button element be added to the page after page load.

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

DEMO

Or

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

DEMO

Or

$("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

Try this code :

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

I hope it help you