Question

I am using jQuery 1.4.3.

I am trying to determine a best practice for using data-* attributes. In the recent past, I have created checkboxes like this:

<input type='checkbox' id='123' class='Product' comp='1' man='1'>
<input type='checkbox' id='456' class='Product' comp='1' man='2'>
<input type='checkbox' id='789' class='Product' comp='2' man='3'>

The HTML 5 spec says that I shouldn’t use custom attributes and that I should use data-* attributes. Which means that the above checkboxes should really be like this:

<input type='checkbox' id='123' class='Product' data-comp='1' data-man='1'>
<input type='checkbox' id='456' class='Product' data-comp='1' data-man='2'>
<input type='checkbox' id='789' class='Product' data-comp='2' data-man='3'>

That’s easy enough to accomplish, but with jQuery, I would usually call these elements by their id, which in this case happens to be the actual product id. So, my code to access these would be like this:

$(".Product").click(function() {
    var ProductID = $(this).attr("id");
    alert(ProductID );
});

Since the ID is really just a piece of data that I need to access, it should be a data-* attribute instead of an id. I think what I really should be doing is this:

<input type='checkbox' class='Product' data-prodid='123' data-comp='1' data-man='1'>
<input type='checkbox' class='Product' data-prodid='456' data-comp='1' data-man='2'>
<input type='checkbox' class='Product' data-prodid='789' data-comp='2' data-man='3'>

This means that the id is no longer necessary for storing data, because I can do this:

$(".Product").click(function() {
    var ProductID = $(this).attr("data-prodid");
    alert(ProductID );
});

And if I want to check or uncheck a specific GROUP of boxes, I can do something like this:

// WHEN A PRODUCT IS CLICKED 
$(".Product").click(function() {
    // GET THE COMP
    var Comp = $(this).attr("data-comp");
    // UNCHECK BOXES WITH A DISSIMILAR COMP THAN THE ONE CLICKED
    $("[data-comp]!="+Comp).attr("checked", false);
});

It really seems like I can accomplish everything I need without using the id for storing data. Am I wrong? Is this how I should implement microdata storage? Is it correct that I will no longer need the id attribute except for CSS layout? Am I missing anything?

Answer 1

Using ID has its own meaning in HTML,CSS and Javascript.

• ID in HTML defines an unique element meaning it must be unique in a
  document.

• ID in CSS applies styling rules to a specific block or element.

• ID in JS will allow you to retrieve the element using
  document.getElementById.

You don’t have any of those meaning when you use data attribute.