CODEWITHSUNDEEP
jquery
Don'tDownvoteMe
Don'tDownvoteMe

Reputation: 501

Trying to get the value of a checkbox using Jquery

I am new to Jquery and I am trying to fetch the value of a checkbox using attr(). But the result in the alert box says "undefined". Plz someone explain why does that happen?

$("#checkbox").click(function() {
  alert($("checkbox").attr("value"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

Upvotes: 2

Views: 46

Answers (4)

Scath
Scath

Reputation: 3824

You can use input[type='checkbox'] to get all the checkbox input instead of trying to get them by their ids.

$("input[type='checkbox']").click(function() {
  console.log($(this).val());
;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

Upvotes: 1

meskobalazs
meskobalazs

Reputation: 16041

ID's should be unique, so don't use them in this case. But e.g. you can select all checkboxes:

$("input[type=checkbox]").click(function() {
  alert($(this).attr("value"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

I have also changed the inside of the alert, as click sets the this value to the affected element.

Upvotes: 4

depperm
depperm

Reputation: 10746

The issue is $("checkbox") doesn't select anything. If you changed that line to $('#checkbox') your code would work for the first checkbox. Also, ids in HTML should be unique. If you change id to class and change the query to be $('.checkbox') then you can alert with any of the check boxes.

$(".checkbox").click(function() {
  alert($(this).attr("value"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" class="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" class="checkbox" value="US">USA
<input type="checkbox" name="checkbox" class="checkbox" value="Rus">Russia
<div id="result"></div>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337550

You have several issues here:

  • $('checkbox') isn't a valid selector as it's searching for a <checkbox /> element which doesn't exist. You can select the element by attribute instead, eg [name="checkbox"] or by using the :checkbox selector.
  • You should use the val() method to get the value of a form input, not attr('value')
  • You have multiple elements with the same id which is invalid. id must be unique within the DOM. Use classes if you want to group common elements.
  • Use the change event on checkbox and radio inputs as it's better for accessibility (ie. it will still work for those users who navigate the web via their keyboard only)
  • Use the this keyword within the event handler to get a reference to the element which raised the event.

With those issues in mind, this should work for you:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" value="US">USA
<input type="checkbox" name="checkbox" value="Rus">Russia
<div id="result"></div>

<script>
  $(":checkbox").change(function() {
    console.log($(this).val());
  })
</script>

Upvotes: 5

Related Questions