Get checkbox attribute with jQuery

Question

For example I have several checkboxes.

<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" cat="121">
<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" cat="141">

Two questions:

Is the declaration of cat attribute valid?
How can I get access to cat attribute value for example when I click on button?

Don't be fooled, data-* attributes are only valid if you plan to use an HTML5 doctype. Having said that, your example really sucks – values and ids are the same — Alexander
– Alexander, Commented Nov 18, 2012 at 14:26

Ram · Accepted Answer · 2012-11-18 14:32:04Z

9

No, cat is not a valid attribute, you can use HTML5 data-* attributes and jQuery data method:

<input type="checkbox" value="27" name="option_value[12][]" id="option_value_27"  class="filtered option_value" data-cat="121">

$('#button').click(function(){
    var cat = $('#option_value_27').data('cat');
})

Or attr method:

var cat = $('#option_value_27').attr('data-cat');

Or if you are not using jQuery, you can also use dataset property:

var cat = document.getElementById('option_value_27').dataset.cat;

Also note that IDs must be unique. If you want to get the values of all cat attributes, you can use the map method:

var cats = $('.filtered').map(function(){
    return this.dataset.cat
    // or $(this).attr('data-cat')
}).get()
// console.log(cats)

Now cats is an array of all the values of data-cat attributes.

edited Nov 18, 2012 at 14:32

answered Nov 18, 2012 at 13:55

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spider84 Over a year ago

Thanks for answer. Can I use a class selector - for example var cat = $('.filtered').attr('data-cat'); for getting all checked values?

Spider84 Over a year ago

Can I use a class selector - for example var cat = $('.filtered').attr('data-cat'); for getting all checked values?

Ram Over a year ago

@Spider84 You can use class selector which is good, but attr returns a attribute value of the first selected element, you can use map method, I'll update the answer.

Collectives™ on Stack Overflow

Get checkbox attribute with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related