Get the ID by Class name JQuery

Question

Hi this is a jquery question:

supposed i have this:

<input type="checkbox" class="select" id ="select-1">

<input type="checkbox" class="select" id ="select-2">

and i want to get the id, of the checkbox that has been selected when i click a submit button (note: you can only select 1) and i have this button click event here:

$("#submit").click(function(){

          if($(".select").is(':checked')){

              alert($(".select").attr('id'));
          }
});

It always alerts "select-1" even if i select the checkbox with the "select-2" id.. I'm guessing since they're both in the same class the first one with the ".select" class to be found is displayed in the alert.. how do i get the specific id that is checked by using their class names? Thank You!

you should be using radio buttons. if its one option from many = radio buttons. if its multiple options from many = checkboxes. — Rafael Herscovici, Oct 25 '13 at 06:37

XCS · Accepted Answer · 2014-04-02T18:59:49.247

45

Are you only checking one checkbox at a time?

alert( $(".select:checked").attr('id') );

Or, if you have multiple checkboxes checked at once:

$(".select:checked").each(function(){
   alert($(this).attr('id'));
});

Demo: http://jsfiddle.net/UTux2/

edited Apr 02 '14 at 18:59

answered Oct 25 '13 at 06:35

XCS

27,244
26
101
151

score 3 · Answer 2 · answered Oct 25 '13 at 06:36

3

Get ID using this way

$(".select:checked").attr('id');

Also keep in mind that if only one can be selected, it's better to change it to radio.

answered Oct 25 '13 at 06:36

Elon Than

9,603
4
27
37

score 2 · Answer 3 · answered Oct 25 '13 at 06:36

2

You aren't capturing the checked checkbox, you're only asking "is there one checked?".

$("#submit").click(function(){

    var elem = $(".select:checked");

    if(elem.length > 0){
        alert(elem.attr('id'));
    }
});

answered Oct 25 '13 at 06:36

MrCode

63,975
10
90
112

Somnath Kharat · Answer 4 · 2013-10-25T06:43:13.183

2

$("#submit").click(function(){  
          if($(".select").is(':checked')){
               var $this=$(".select").is(':checked');
               alert($this.attr('id'));
          }
});

edited Oct 25 '13 at 06:43

answered Oct 25 '13 at 06:37

Somnath Kharat

3,570
2
27
51

4

`$(this`) points to the `$('#submit')`, so this is not correct. – XCS Oct 25 '13 at 06:39

score 2 · Answer 5 · answered Oct 25 '13 at 06:37

2

There are multiple elements. You need to check for all checkbox having same class

$("#submit").click(function(){

          $(".select:checked").each(function(){
           alert($(this).attr('id'));
   });

});

answered Oct 25 '13 at 06:37

sudhansu63

6,025
4
39
52

score 2 · Answer 6 · answered Oct 25 '13 at 06:41

you should be using radio buttons and not checkboxes to allow one choice out of many.

<input type="radio" name="select" value="select-1">
<input type="radio" name="select" value="select-2">

then things will get really simple:

$("#submit").click(function(){

    alert($('[name="select"]:checked').val());
});

score 0 · Answer 7 · answered Oct 25 '13 at 06:46

try something like this, you don't need to iterate

        $(document).ready(function () {
            $("#submit").click(function(){
                  if($(".select").is(':checked')){
                      alert($(".select:checked").attr('id'));
                  }
            });
        });

score -1 · Answer 8 · answered Oct 25 '13 at 06:41

-1

Because you have not iterated all the elements which has class 'select'. It always goes to the first element and prints the result. Put a loop to iterate all elements having class 'select'.

answered Oct 25 '13 at 06:41

swapnil

1
3

Get the ID by Class name JQuery

8 Answers8

Linked